ساخت دگمه اسکرول به بالا توسط jquery

[freejoom 10]

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

دمو اسکرول به بالا

دانلود دموی زیپ

طراحی css

المان #back-top با position:fixed تعریف نموده تا در صفحه به صورت ثابت باقی بماند. تگ span اضافی است. تگ span را به این دلیل اضافه نموده ام که بتوانم به آن گرافیک تصویری اضافه نمایم. همچنین خصوصیت transition:1s (1s = 1 second) برای ایجاد افکت موس اور فید اضافه نمودم.

به این بخش نگاهی بیندازید دمو (یادداشت: هنوز بخش jquery اضافه نگردیده).

بخش jQuery (دمو)

کد زیر کد Javascript می باشد. به صورت پیش فرض, تگ #back-top مخفی خواهد شد (آن <p id="back-top"> تگ در دمو می باشد) . سپس اسکرول بار صفحه را چک می نماید (اسکرول به بالا) زمانی که بزرگتر از 100 بود, سپس بر روی المان #back-top فید می نماید, در غیر این صورت فید اوت می نماید. بخش بعدی کل کلیدهای فانکشنی هستند. هنگامی که #back-top کلیک شد, صفحه را به موقعیت 0 اسکرول می دهد.

در صورتی که می خواهید کد نویسی jquery یاد بگیرید, بخش مقالات jquery را مطالعه نمایید.

لینک منبع

ویرایش شده در آبان 92 توسط freejoom

[Mohammad973 10]

این که هیچ لینکی نداره برادر !!!

[freejoom 10]

سلام دوستان گرامی

به دلیل اینکه کدها در این editor جابه جا کپی میشه,من نتونستم کدها رو بزارم و برای استفاده کدهای jquery شما یا از لینک منبع بالا استفاده کنید یا از لینک زیرین :

ساخت دگمه اسکرول به بالا توسط jquery