یکی از قابلیت هایی که می توانیم بعنوان یک المنت رابط کاربری در سایت برای راحتی کاربران در نظر بگیریم، اضافه کردن کلید بازگشت به بالا یا اسکرول به ابتدای سایت است که کاربران زمانی که به بخش های پایینی سایت می روند بتوانند بدون نیاز به اسکرول مجدد به ابتدای صفحه بازگردند. این کار بیشتر برای سایت هایی مفید است که در ابتدای سایت گزینه ها و یا منوهایی وجود دارند که باعث دسترسی راحت تر کاربران به مابقی بخش های سایت می شوند و در سایت هایی که منوی چسبان در بالای سایت وجود ندارد بهترین کار اضافه کردن یک کلید برای بازگشت به بالا است. در این تاپیک از انجمن بی تاک قصد داریم انواع روش های اضافه کردن این کلید را به شما آموزش دهیم.
اصلی ترین کد و تقریبا پیشرفته ترین کد برای اضافه کردن این کلید به این صورت است که ابتدا شما باید ابن کد را در یکی از فایل های جاوا اسکریپت قالب یا سایتتان قرار دهید:
//Get the button:
mybutton = document.getElementById("myBtn");
// When the user scrolls down 20px from the top of the document, show the button
window.onscroll = function() {scrollFunction()};
function scrollFunction() {
if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
mybutton.style.display = "block";
} else {
mybutton.style.display = "none";
}
}
// When the user clicks on the button, scroll to the top of the document
function topFunction() {
document.body.scrollTop = 0; // For Safari
document.documentElement.scrollTop = 0; // For Chrome, Firefox, IE and Opera
}
سپس این کد را در فایل مربوط به فوتر سایت قرار دهید یعنی قبل از تگ </html>. این کد مربوط به کلید ماست:
<button onclick="topFunction()" id="myBtn">برو بالا</button>
و برای داشتن ظاهری بهتر برای این کلید، این کدها را در یکی از فایل های استایل با فرمت .css سایتتان اضافه کنید:
#myBtn {
display: none; /* Hidden by default */
position: fixed; /* Fixed/sticky position */
bottom: 20px; /* Place the button at the bottom of the page */
right: 30px; /* Place the button 30px from the right */
z-index: 99; /* Make sure it does not overlap */
border: none; /* Remove borders */
outline: none; /* Remove outline */
background-color: red; /* Set a background color */
color: white; /* Text color */
cursor: pointer; /* Add a mouse pointer on hover */
padding: 15px; /* Some padding */
border-radius: 10px; /* Rounded corners */
font-size: 18px; /* Increase font size */
}
#myBtn:hover {
background-color: #555; /* Add a dark-grey background on hover */
}
حالت بدون جاوا اسکریپت
خوشبختانه در HTML5 این امکان وجود دارد که بدون نیاز به جاوا اسکریپت هم این قابلیت را به سایت اضافه کنیم اما استفاده از جاوا اسکریپت تضمینی برای اجرای کلید در اکثر مرورگرهاست. اگر قصد دارید بدون جاوا اسکریپت این کلید را داشته باشید کافیست این کد را در جای مناسبی از کدهای قالبتان قرار دهید.
<a href="#top">برو بالا</a>
