المُقدّمة
عندما يكون لديك موقع ويب يطالب المستخدمين بالتمرير لأسفل لفترة طويلة - فإن تقديم زر للتمرير مرة أخرى إلى الأعلى يعد لفتة لطيفة!
في هذا الدليل العملي ، سنتعلم كيفية إنشاء زر HTML / CSS / JS متحرك للتمرير إلى الأعلى في Vanilla JavaScript.
ملحوظة: كود المصدر والمعاينة الحية متاحان على CodePen.
كيف تبدأ
سننشئ الوظيفة من البداية ونصممها. باستخدام أ querySelector()، سنقوم بتحديد الزر الذي تم إنشاؤه وتبديل ظهوره وإيقاف تشغيله استنادًا إلى مكان وجود المستخدم في الصفحة ، ونقوم بتشغيل حدث للتمرير إلى الأعلى عند كل نقرة.
إذا كنت ترغب في القراءة حول إنشاء شريط تمرير لأعلى في React ، فاقرأ كيفية التمرير إلى أعلى في React باستخدام مكون الزر!
لأن الزر ثابت في موقع معين (أسفل اليمين) باستخدام CSS position السمات ، فقد يتم إدراج ترميز هذه الوظيفة في أي مكان داخل ملف body عنصر من كود HTML الخاص بك:
<div className="scroll-to-top"> <span class="btn btn-position btn-style">^</i>
</div>
بمجرد الإضافة ، يمكننا تصميم الزر والزر الخاص به <div>. سنصلح موضع الزر في أسفل اليمين ، ونعوضه قليلاً من الأسفل والجانب الأيمن:
.scroll-to-top { position: relative;
} .btn-position { position: fixed; bottom: 40px; right: 25px; z-index: 20;
} .btn-style { background-color: #551b54; border: 2px solid #fff; border-radius: 50%; height: 50px; width: 50px; color: #fff; cursor: pointer; animation: movebtn 3s ease-in-out infinite; transition: all 0.5s ease-in-out; font-size: 40px; display: flex; justify-content: center; align-items: center; visibility: hidden;
}
لقد وضعنا visibility من هذا الزر إلى hidden افتراضيًا ، بحيث يظهر الزر فقط عندما يقوم المستخدم بالتمرير لأسفل إلى موضع معين (المحور Y) - سنفعل ذلك عن طريق تغيير خاصيته باستخدام JavaScript لاحقًا. أخيرًا ، دعنا نضيف ملف تحوم وبعض الرسوم المتحركة على الزر بحيث لا يقف ساكنًا:
.icon-style:hover { animation: none; background: #fff; color: #551b54; border: 2px solid #551b54;
} @keyframes movebtn { 0% { transform: translateY(0px); } 25% { transform: translateY(20px); } 50% { transform: translateY(0px); } 75% { transform: translateY(-20px); } 100% { transform: translateY(0px); }
}
تنفيذ المنطق
الآن بعد أن تم تصميم الزر ، وأصبح غير مرئي - دعنا ننفذ المنطق الذي يجعله مرئيًا بمجرد أن يقوم المستخدم بالتمرير لأسفل. سنختاره عبر querySelector() وإرفاق ملف EventListener للعنصر:
const scrollBtn = document.querySelector(".btn");
الآن ، استنادًا إلى موضع القيمة Y للنافذة (مقدار التمرير الذي قام المستخدم بتمريره عموديًا ، بدءًا من 0) - سنقوم بتعيين ملف visibility من عنصر "visible" or "hidden" إذا كانت القيمة Y أقل من عتبة معينة:
const btnVisibility = () => { if (window.scrollY > 400) { scrollBtn.style.visibility = "visible"; } else { scrollBtn.style.visibility = "hidden"; }
};
الآن لدينا وظيفة والتي ، عند استدعائها ، تتحقق مما إذا كانت صفحة الويب قد تم تمريرها لأسفل إلى 400، وتعيين visibility عنصر الزر إلى visible، وإلا فإنه يضبطه على hidden.
أخيرًا - سنرغب في استدعاء هذه الوظيفة بشكل متكرر للتحقق من الوضع بشكل متكرر وضبط الرؤية وفقًا لذلك. من الأفضل القيام بذلك من خلال مستمع الحدث الذي يقوم بتشغيل الوظيفة عند كل تغيير في التمرير:
document.addEventListener("scroll", () => { btnVisibility();
});
الجزء الأخير من الكود الذي نريد إرفاقه بمستمع الحدث هو المنطق لتمرير المستخدم احتياطيًا برمجيًا عند النقر فوق الزر. ال scrollToTop() وظيفة من window المثال يفعل ذلك بالضبط! يمكننا تعيين "القمة" ، من خلال توفير إحداثي Y ، ويمكننا استدعاء الطريقة على كل منها "click" حدث على الزر:
scrollBtn.addEventListener("click", () => { window.scrollTo({ top: 0, behavior: "smooth" });
});
ملحوظة: window.scrollTo() يحتوي على معلمة سلوك تشير إلى ما إذا كان التمرير يجب أن يتقدم بسلاسة (بسلاسة) أو على الفور في خطوة واحدة (auto القيمة الافتراضية).
هذا هو! حاول التمرير لأسفل الصفحة - سيظهر زر متحرك. بمجرد أن يتم ذلك وتنقر فوقه ، ستتم إعادتك بسلاسة إلى أعلى الصفحة:
وفي الختام
التمرير إلى أعلى الصفحة ليس بالأمر الصعب - حتى مع مستمعي الأحداث والرسوم المتحركة! في هذا الدليل العملي ، تعلمنا كيفية تنفيذ وظيفة التمرير لأعلى باستخدام Vanilla JavaScript وتصميم الزر.
