ستروکیت

ممکنه در برخی سایت‌ها دیده باشین که وقتی اسکرول می‌کنید یک دکمه ظاهر می‌شود که به دکمه بازگشت با بالا معروف است و با فشردن آن شما به بالای سایت هدایت می‌شوید. ما در این مقاله قصد داریم شیوه‌ی استفاده از این دکمه را در طراحی سایت به شما آموزش بدیم.

دکمه بازگشت به بالا چیست؟

هنگامی که ارتفاع مطالب سایت زیاد می‌شود بازگشت به بالای سایت با اسکرول کردن می‌تواند خسته کننده باشد. در این مواقع بهتر از یک دکمه برای بازگشت با بالای سایت استفاده کنیم. که معمولا در سایت‌های راستچین در گوشه پایین سمت چپ قرار می‌گیرد و جایگاه ثابتی دارد.

چیزهایی که باید قبل از افزودن دکمه بازگشت به بالا در نظر بگیرید

قبل از پیاده‌سازی بهتر است چند سوال زیر را از خود بپرسید که دید بهتری را به شما دهد.

• کجا قرار خواهد گرفت؟
• چقدر باید بزرگ (یا کوچک) باشد؟
• چه الگوی طراحی را باید دنبال کنید تا با برند شما سازگار باقی بماند؟ (رنگ، فونت، آیکون . ..)
• آیا محتوای مهمی از سایت را خواهد پوشاند؟
• در دستگاه‌های موبایل چه اتفاقی خواهد افتاد؟ ریسپانسیو خواهد ماند؟
• آیا واقعا به آن نیاز دارید؟

پیاده‌سازی دکمه بازگشت به بالا روی سایت

در این آموزش، به شما نشان داده خواهد شد که چطور می‌توانید دکمه بازگشت با بالا را در گوشه سمت چپ - پایین قرار دهید.

برای این آموزش از سه زبان استفاده خواهیم کرد:

• HTML برای ایجاد دکمه
• CSS برای استایل دهی و مطابقت با برند شما
• JavaScript برای کارکردن دکمه و تعریف عملکرد دکمه

این چند خط را باید در HTML خود قرار دهید:

<a class="top-link hide" href="" id="js-top">
 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 6"><path d="M12 6H0l6-6z"/></svg>
 <span class="screen-reader-text">Back to top</span>
</a>

این دکمه‌ی بازگشت به بالای شما خواهد بود! می‌تونید ببینید که ما کلاس CSS به نام .top-link رو اضافه کردیم، و از چند خط کد ساده‌ی JavaScript برای کار کردن آن استفاده خواهیم کرد. همچنین از ‌in-line SVG برای دکمه استفاده کرده‌ایم.

علاوه بر SVG شما می‌تونید از تصویر یا فونت آیکون برای ساخت دکمه استفاده کنید. ما ترجیح دادیم از SVG استفاده کنیم، به خاطر اینکه:

1. در صفحه‌های با اندازه متفاوت شطرنجی یا پیکسل- پیکسل نمی‌شود.
2. SVG در اکثر مرورگرها پشتیبانی می‌شود.
3. استایل دهی آن راحت است، در نتیجه شما هر چیز آن را می‌توانید تغییر دهید.
4. فقط یک خط فضا می‌گیرد و سبک‌تر و بهتر است و کارایی سایت را بیشتر می‌کند.

و آخرین خط مهمی که در کد بالا داشتیم:

<span class="screen-reader-text">Back to top</span>

این خط برای کاربرانی که از حالت (screen readers) استفاده می‌کنند ضروری است.

حال اجازه دهید درباره کلاس CSS .top-link بیشتر صحبت کنیم. ما این کار را برای استایل دهی به دکمه استفاده کردیم مانند اندازه دکمه، رنگ، حاشیه های آن و غیره.

.top-link {
 transition: all .25s ease-in-out;
 position: fixed;
 bottom: 0;
 left: 0;
 display: inline-flex;
 cursor: pointer;
 align-items: center;
 justify-content: center;
 margin: 0 3em 3em 0;
 border-radius: 50%;
 padding: .25em;
 width: 80px;
 height: 80px;
 background-color: #F8F8F8;
}

.top-link:hover {
 background-color: #E8E8E8;
}

چند نکته مهم از کد CSS

• transition: all .25s ease-in-out; کنترل سرعت ظاهر شدن و مخفی شدن دکمه
• position: fixed; ثابت نگه داشتن دکمه

حالا نقش کلاس‌های .show و .hide . ما از جاوا اسکریپت برای جابجایی بین دو کلاس استفاده می‌کنیم که به مرورگر بگوید چه موقع دکمه ظاهر و چه موقع مخفی شود.

.show {
 visibility: visible;
 opacity: 1;
}
 
.hide {
 visibility: hidden;
 opacity: 0;
}

قبل از اینکه به دنبال جاوا اسکریپت برویم، چند خط ‌CSS دیگر هم اضافه می‌کنیم.

.top-link svg {
 fill: #000;
 width: 24px;
 height: 12px;
}
 
.top-link:hover svg{
 fill: #000000;
}

این کلاس‌ها ‌SVG را استایل‌دهی می‌کنند و به مرورگر می‌گویند که دکمه چطور نمایش داده شود.

سرانجام، مخفی کردن نوشته‌ی داخل دکمه.

.screen-reader-text {
 position: absolute;
 clip-path: inset(50%);
 margin: -1px;
 border: 0;
 padding: 0;
 width: 1px;
 height: 1px;
 overflow: hidden;
 word-wrap: normal !important;
 clip: rect(1px, 1px, 1px, 1px);
}
 
.screen-reader-text;:focus {
 display: block;
 top: 5px;
 left: 5px;
 z-index: 100000; // Above WP toolbar
 clip-path: none;
 background-color: #eee;
 padding: 15px 23px 14px;
 width: auto;
 height: auto;
 text-decoration: none;
 line-height: normal;
 color: #444;
 font-size: 1em;
 clip: auto !important;
}

اکنون قسمت جاوا اسکریپت! ما این قسمت را بدون نیاز به jQuery انجام می‌دهیم، که کدهای شما را سبک تر و سرعت بارگزاری را بیشتر می‌کند.

متغیر اول به مرورگر کمک می‌کند تا دکمه را پیدا کند.

/* Set a variable for our button element. */
const scrollToTopButton = document.getElementById('js-top');

در صورتی که کاربر از بالاترین سطح پنجره اولیه حرکت کند، تابعی را ایجاد خواهیم کرد که دکمه پیمایش به بالا را نشان می‌دهد.

const scrollFunc = () => {
 /* Get the current scroll value */
 let y = window.scrollY;
 
 /* If the scroll value is greater than the window height, let's add a class to the scroll-to-top button to show it! */
 if (y > 0) {
 scrollToTopButton.className = "top-link show";
 } else {
 scrollToTopButton.className = "top-link hide";
 }
};

ما همچنین یک شنونده رویداد اضافه خواهیم کرد، که حرکت کاربر را در نظر خواهد داشت.

window.addEventListener("scroll", scrollFunc);

تقریبا تمام! ما باید تابعی را تعریف کنیم که باعث شود دکمه واقعا کاربر را به بالای صفحه برگرداند. برای این کار، ما فاصله‌ای را که تا بالای صفحه داریم در یک متغیر ذخیره خواهیم کرد. اگر عدد بیشتر از ۱۰ بود، تابع آن را صفر کرده و ما را به بالای صفحه هدایت می‌کند.

const scrollToTop = () => {
 /* Let's set a variable for the number of pixels we are from the top of the document. */
 const c = document.documentElement.scrollTop || document.body.scrollTop;
 
 /* If that number is greater than 0, we'll scroll back to 0, or the top of the document.
 We'll also animate that scroll with requestAnimationFrame: 
 https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame */
 if (c > 0) {
 window.requestAnimationFrame(scrollToTop);
 /* ScrollTo takes an x and a y coordinate.
 Increase the '10' value to get a smoother/slower scroll! */
 window.scrollTo(0, c - c / 10);
 }
};

نکته آخر اما فقط باید به صفحه بگوییم که وقتی شخصی روی دکمه بازگشت به بالا کلیک کند، تابع بالا را اجرا کند.

/* When the button is clicked, run our ScrolltoTop function above! */
scrollToTopButton.onclick = function(e) {
 e.preventDefault();
 scrollToTop();
}