Home آموزش طراحی سایت آموزش جیکوئری دکمه بازگشت به بالا با JQuery

دکمه بازگشت به بالا با JQuery

3
2
47

سلام خدمت همه خوانندگان عزیز ویکی وردپرس

توی این پست میخوایم یه ابزار کاربردی بسازیم که تقریبا تو اکثر سایت ها وجود داره. دکمه بازگشت به بالا !!

این دکمه وقتی به درد میخوره که کاربر اومده پایینای صفحه و به منوی بالا دسترسی نداره و باید کلی اسکرول کنه تا برگرده بالا. به همین خاطر یه دکمه بازگشت به بالا میذاریم که با کلیک روی اون بتونه خیلی راحت بره بالای صفحه.

کدی که امروز مینویسیم به شدت ساده و به شدت کاربردی هست. پس بریم سراغ اصل مطلب 🙂

مثل پست های قبلیم دوس دارم اول دمو رو ببینیم. تو باکس زیر اسکرول کنید و نتیجه رو ببینید:

See the Pen mRbLrY by abbas (@AbbasH90) on CodePen.

خب بریم سراغ کدها. اول از همه با یه ساختار خیلی ساده html شروع میکنیم کارو:

حالا میریم سراغ استایل دادن. دقت کنید برای ساختن اون مثلث از css استفاده کردیم. بعدا تو یه پست نحوه ساختن مثلث با css رو کامل توضیح میدم. این کدها برای استایل دادن هستن:

حالا بریم سراغ توابع جاوا اسکریپت که به کمک JQuery نوشتیم.

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

برای زیباتر شدن افکت اسکرول از تابع animate استفاده کردیم که به صورت انیمیشنی و در مدت زمان 800 میلی ثانیه اسکرول رو انجام بده.

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

موفق باشید 🙂

3 نظر

  1. حسن

    ژانویه 6, 2017 در 1:54 ب.ظ

    عالييييييييييي بود😱

    نقل قول

    • عباس حسن زاده

      عباس حسن زاده

      ژانویه 11, 2017 در 9:31 ب.ظ

      مرسی حسن جان 🙂

      نقل قول

  2. میلاد

    ژانویه 18, 2017 در 10:38 ق.ظ

    ممنون کد مفیدی است
    تشکر

    نقل قول

ارسال نظر

ایمیل شما منتشر نمیشودفیلد های ستاره دار اجباری هستند *