اسکرول نرم با استفاده از چند خط کد jQuery

- visibility ۲۰ mode_comment

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

برای همین در پست امروز با استفاده از جی کوئری این کار رو انجام خواهیم داد . اول از همه می تونید دموی زیر رو ببینید که بهتر متوجه بشید منظور از اسکرول نرم (smooth scroll) چیه هسن :

 

 گام نخست: لود کردن کتابخانه ی جی کوئری

در اولین مرحله باید کتابخونه ی جی کوئری رو در هدر صفحه ی وب و یا قالب سایت و وبلاگ خودتون به این شکل اضافه کنید :

در کد بالا jQuery رو از گوگل لود کردیم . شما می تونید آدرس رو عوض کنید و آدرس کتابخونه ی آپلود شده ی خودتون رو قرار بدید .

 گام دوم: نوشتن تابع اسکرول نرم

بعد از لود کردن jquery حالا با نوشتن چند خط کد به شکل زیر قابلیت اسکرول نرم رو به صفحه ی وبتون اضافه می کنید . این کد رو هم در هدر صفحه و بعد از کد قبلی قرار بدید :

بعد از اینکه این تابع رو اضافه کردید قابلیت اسکرول نرم رو به صفحه اضافه کردید و حالا فقط باید از اون استفاده کنید .

 استفاده از اسکرول نرم

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

اول بهتره که مقصد اسکرول رو تعین کنید . با دادن ویژگی id به تگهای html می تونید اون ها رو به عنوان مقصد اسکرول مشخص کنید . به طور مثال ما می خوایم لینکی رو در صفحه قرار بدیم که با کلیک روی اون صفحه به جایی اسکرول بشه که یه پاراگراف با آیدی paragraph1 قرار داده . برای همین اول باید این پاراگراف با این آیدی رو در صفحه بزارید (یا اینکه id مذکور رو به یک پاراگراف از قبل موجود اضافه کنید):

info نکته :

با انتساب آیدی به هر تگی در صفحه ی html می تونید اونو به عنوان مقصد اسکرول تعیین کنید .

بعد از اینکار با استفاده از یه لینک ساده که به تگ مذکور اشاره میکنه می تونید مبدا اسکرول رو هم مشخص کنید . مثلا لینک زیر رو اگه در صفحه اضافه کنید، با کلیک روی اون با اسکرول نرم به همون پاراگراف بالایی میریم :

info نکته :

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

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

براتون آرزوی موفقیت می کنم .

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

سلا م آقای آوند و ممنون از این آموزش . لینک ها خوب ریدایرکت نمیشن و باید دستی انجامش داد . سوالی داشتم در این مورد که :
چطور میشه سرعت خود اسکرول رو تنظیم کرد و حرکت اون رو نرم تر کرد وقتی سایت رو اسکرول میکنیم و میایم پایین .
عذر خواهم داخل این کامنت پرسیدم .

وحید صالحی

دوست عزیز سوالتون رو در انجمن مطرح کنید

سینا

ممنون خیلی دنبالش بودم.. کارم رو راه انداخت, خدا کارتونو راه بندازه D:

مبین طارمی

با سلام
کجا میشه محتوای سایت رو دید که مبدا و مقصد رو تعیین کرد؟

وحید صالحی

باید توسط تگ ها نشانه گذاری کنید

نیاز به لاگین

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