اسکرول کردن به بالای صفحه با استفاده از Javascript



visibility  
mode_comment   ۰

اسکرول کردن به بالای صفحه با استفاده از Javascript

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

اگر شما به انیمیشن خاصی احتیاج ندارید لزومی نداره که از هیچ گونه پلاگین خاصی استفاده کنید و تنها استفاده از متد window.scrollTo در Javascript کفایت می کنه. به کد زیر دقت کنید:

در این متد از دو پارامتر  x-coord و  y-coord استفاده شده  که x-coord پیکسل در راستای محور افقی و y-coord پیکسل در راستای محور عمودی هست. توجه کنید که اگر به کمک متد window.scrollTo به موقعیت 0 و 0 بریم سریعا به بالای صفحه و سمت چپ می ریم. از اونجایی که در بیشتر مواقع اسکرول افقی در صفحه وجود ندارد، پس با اجرا کردن کد بالا به بالای صفحه میریم. ولی اگر اسکرول افقی وجود داشته باشه با 0 قرار دادن مقدار افقی، به چپ ترین موقعیت صفحه خواهید رفت.

متخصص وردپرس
قالب ها و پلاگین های حرفه ای وردپرس رو خودت بنویس! بازار طراحی قالب و پلاگین نویسی وردپرس به شدت داغه و اگر بلد باشید با برنامه نویسی اختصاصی، قالب ها و پلاگین های دلخواه بنویسید تو مارکت های مطرح دنیا و یا از طریق فریلنسری می تونید به درآمد بالا برید. دوره متخصص وردپرس سون لرن رو حتما ببینید: متخصص وردپرس arrow_back

شما میتونین علاوه بر روش بالا، یک شئ رو به متد scrollTo پاس بدین. این شئ میتونه سه ویژگی داشته باشه که عبارتند از:

  • top : موقعیت عمودی
  • left : موقعیت افقی
  • behavior : رفتار اسکرول کردن که میتونه یکی از مقادیر smooth یا instant یا auto رو بگیره. مقدار پیش فرض این ویژگی auto هست.

اگر از مقدار smooth استفاده کنید بصورت آهسته و انیمیشنی به موقعیت مورد نظر اسکرول میشید. این مقدار در همه مرورگرها پشتیبانی نمیشه و مثلا میتونین از این Polyfill استفاده کنید تا در مرورگرهای بیشتری پشتیبانی بشه.

روش دیگری نیز برای اسکرول کردن سریع به بالای صفحه وجود داره. در کدهای زیر از jQuery استفاده میکنیم. برای این منظور می تونید از کد زیر استفاده کنید:

همونطور که میبینید هر زمان بر روی لینک کلیک میشه بصورت انیمیشنی و آهسته به بالای صفحه اسکرول میشه.

در روش سوم به معرفی کد زیر می پردازیم که به کمک اون بتونید به بالای صفحه اسکرول کنید:

اگر شما هم روشی برای انجام اینکار به ذهنتون میرسه خوشحال میشیم که در بخش نظرات با ما در میان بذارید.

comment دیدگاه کاربران

نیاز به لاگین

برای ارسال دیدگاه و یا پرسیدن سوال خود در این قسمت، باید در سایت لاگین شوید.