آموزش ساخت دکمه برگشت به بالا

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

اگر هنوز دقیقا نمیدانید که دکمه ی بازگشت به بالا چیست، کافی است در وبسایت مسترکد اندکی به پایین اسکرول کنید (تا دیگر بالای صفحه قابل مشاهده نباشد) سپس به  گوشه ی پایین سمت راست صفحه نگاه کنید. در این حالت میتوانید دکمه ی بازگشت به بالا که دارای یک پیکان به سمت بالاست را مشاهده کنید. همین حالا کارکرد این دکمه را امتحان کنید. خواهید دید که با کلیک بر روی این دکمه به سادگی به بالای صفحه هدایت خواهید شد.

شروع کار

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

 فایل های مربوط به پلاگین elevator.js، را می توانید از انتهای همین مطلب دانلود نمایید

S و طراحی

پیش از ظهور jQuery این دکمه در بعضی وب سایت ها وجود داشت اما وقتی در پایین صفحه روی انها کلیک میکردیم ، ناگهان صفحه به بالا جهش می کرد و هیچ حرکت انیمیشنی که نشان دهد صفحه در حال حرکت به بالاست وجود نداشت . 
● مشاهده دکمه حرکت به بالا ( پیش از ظهور jQuery ) 

همانطور که ملاحظه میکنید اینکار به تنهایی توسط دستورات HTML و بدون نیاز به jQuery قابل انجام است اما با اضافه کردن چند خط کد jQuery یک دکمه مدرن و امروزی خواهیم داشت .