در این مطلب قصد داریم روشهایی که با استفاده از اونا میتونیم به بالای صفحه اسکرول کنیم رو به شما آموزش بدیم. هم روشهای Javascript و هم روشهای jQuery در اینجا در اختیارتون قرار میگیره.
اگر شما به انیمیشن خاصی احتیاج ندارید لزومی نداره که از هیچ گونه پلاگین خاصی استفاده کنید و تنها استفاده از متد window.scrollTo در Javascript کفایت می‌کنه. به کد زیر دقت کنید:
window.scrollTo(x-coord, y-coord);
در این متد از دو پارامتر x-coord و y-coord استفاده شده که x-coord پیکسل در راستای محور افقی و y-coord پیکسل در راستای محور عمودی هست. توجه کنید که اگر به کمک متد window.scrollTo به موقعیت 0 و 0 بریم سریعا به بالای صفحه و سمت چپ میریم. از اونجایی که در بیشتر مواقع اسکرول افقی در صفحه وجود ندارد، پس با اجرا کردن کد بالا به بالای صفحه میریم. ولی اگر اسکرول افقی وجود داشته باشه با 0 قرار دادن مقدار افقی، به چپ‌ترین موقعیت صفحه خواهید رفت.
شما میتونین علاوه بر روش بالا، یک شئ رو به متد scrollTo پاس بدین. این شئ میتونه سه ویژگی داشته باشه که عبارتند از:
- top : موقعیت عمودی
- left : موقعیت افقی
- behavior : رفتار اسکرول کردن که میتونه یکی از مقادیر smooth یا instant یا auto رو بگیره. مقدار پیش فرض این ویژگی auto هست.
اگر از مقدار smooth استفاده کنید بصورت آهسته و انیمیشنی به موقعیت مورد نظر اسکرول میشید. این مقدار در همه مرورگرها پشتیبانی نمیشه و مثلا میتونین از این Polyfill استفاده کنید تا در مرورگرهای بیشتری پشتیبانی بشه.
روش دیگری نیز برای اسکرول کردن سریع به بالای صفحه وجود داره. در کدهای زیر از jQuery استفاده میکنیم. برای این منظور می‌تونید از کد زیر استفاده کنید:
$("a[href='#top']").click(function() {
$("html, body").animate({ scrollTop: 0 }, "slow");
return false;
});
همونطور که میبینید هر زمان بر روی لینک کلیک میشه بصورت انیمیشنی و آهسته به بالای صفحه اسکرول میشه.
در روش سوم به معرفی کد زیر می‌پردازیم که به کمک اون بتونید به بالای صفحه اسکرول کنید:
$(document).ready(function(){
$(window).scrollTop(0);
});
اگر شما هم روشی برای انجام اینکار به ذهنتون میرسه خوشحال میشیم که در بخش نظرات با ما در میان بذارید.
اولین دیدگاه این پست رو تو بنویس !