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

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

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

 

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

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

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js'></script>

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

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

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

<script>
$(function() {
  $('a[href*=#]:not([href=#])').click(function() {
    if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
      var target = $(this.hash);
      target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
      if (target.length) {
        $('html,body').animate({
          scrollTop: target.offset().top
        }, 1000);
        return false;
      }
    }
  });
});
</script>

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

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

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

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

<p id="paragraph1">This is a Paragraph !</p>
با انتساب آیدی به هر تگی در صفحه ی html می‌تونید اونو به عنوان مقصد اسکرول تعیین کنید .

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

<a href="#paragraph1">Go to Paragraph1</a>
با استفاده از علامت # که آیدی تگ بلافاصله بعد از اون اومده می‌تونید به بخشی از صفحه ی وب که دارای اون آیدی هست لینک بدید .

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

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

 
ارسال دیدگاه
ما همه سوالات و دیدگاه ها رو می خونیم و پاسخ میدیم
۲۲ دیدگاه
Kasra ۲۹ فروردین ۱۳۹۸، ۱۳:۰۹
سلام دوستان,
واقعا مطلب مهمی بود اما من یه مشکل دارم اونم اینه که اسکرول نرم انجام نمیشه(یعنی یواش یواش نمیره پایین و یکدفعه ای میپره) میخواستم ببینم مشکل از کجاست؟
تازه وقتی کدی که باید بعد اضافه کردن jquery بزاریمم حذف میکنم تغییری ایجاد نمیشه!
mohammad ۲۹ آذر ۱۳۹۷، ۱۳:۴۴
سلام حالا اگه بخواهیم اسکرول کند یعنی در مدت زمان 2 ثانیه به پایین برود چکار کنیم ؟
مبین طارمی ۰۸ فروردین ۱۳۹۶، ۰۰:۰۵
با سلام
کجا میشه محتوای سایت رو دید که مبدا و مقصد رو تعیین کرد؟
وحید صالحی ۱۸ اردیبهشت ۱۳۹۶، ۱۱:۰۵
باید توسط تگ ها نشانه گذاری کنید
سینا ۲۷ اردیبهشت ۱۳۹۵، ۰۱:۲۰
ممنون خیلی دنبالش بودم.. کارم رو راه انداخت, خدا کارتونو راه بندازه D:
dashjalal ۳۱ شهریور ۱۳۹۴، ۰۸:۲۰
سلا م آقای آوند و ممنون از این آموزش . لینک ها خوب ریدایرکت نمیشن و باید دستی انجامش داد . سوالی داشتم در این مورد که :
چطور میشه سرعت خود اسکرول رو تنظیم کرد و حرکت اون رو نرم تر کرد وقتی سایت رو اسکرول میکنیم و میایم پایین .
عذر خواهم داخل این کامنت پرسیدم .
وحید صالحی ۰۲ مهر ۱۳۹۴، ۱۹:۳۶
دوست عزیز سوالتون رو در انجمن مطرح کنید
aria ۰۸ مرداد ۱۳۹۴، ۱۳:۵۰
خــــــــــــیلی دستت درد نکنه.
دمت گرم داداشی. :?:
khashayar ۱۳ تیر ۱۳۹۴، ۱۲:۱۳
سلام خسته نباشید... یه سوال داشتم من این کد و اضافه کردم خیلیم خوب کار می کنه... ولی اسلاید شو منو خراب کرد دیگه اسلایدم کار نمی کنه باید چیکار کنم؟
وحید صالحی ۱۷ تیر ۱۳۹۴، ۱۶:۱۴
سلام چند دلیل میتونه داشته باشه یکیش این که باید چک کنید که تداخلی با فایل های اسلایدرتون نداشته باشه
shima a ۰۳ تیر ۱۳۹۴، ۰۸:۰۰
سلام خیلی ممنون کد مفیدی بود
parham ۲۷ خرداد ۱۳۹۴، ۱۰:۵۳
سلام ببخشید برای ایجاد جی کوئری یا نوشتن پلاگین باید خود جی کوئری فقط بلد بود؟
لقمان آوند ۲۸ خرداد ۱۳۹۴، ۰۰:۴۶
بله
البته اگر جاوااسکریپت هم بلد باشید دیدتون بازتره و کمکتون می کنه در کدنویسی.
نیلوفر ۲۰ اسفند ۱۳۹۳، ۲۲:۲۲
مطلب خیلی مفیدی است
اما نمیدونم چرا برای من رفتن به بالا به آرامی انجام میشه ولی به آرامی پایین نمیاد!!!
وحید صالحی ۲۶ اسفند ۱۳۹۳، ۱۴:۳۹
سلام
نباید هم اینطور باشه:-) بالا و پایین نباید ترم و آرام باشه چون ماهیت کد همینه اونجا که مبینید در ابتدا به آرامی بالا میره مربوط به صفحه ریدایرکت سون لرن هست نه کد مذکور...
hannanstd ۰۹ آبان ۱۳۹۳، ۲۰:۵۲
سلام .
چطور میشه کاری کرد که اگر در حین پایین اومدن کسی هرجا کلیک کرد اسکرول متوقف بشه؟
فرشد ۲۲ تیر ۱۳۹۳، ۰۸:۴۶
ممنون .
امکان خیلی جالبی بود .
حامد مودی ۲۱ تیر ۱۳۹۳، ۱۰:۱۷
سلام استاد بالاخره انگشت به کیبورد شدین!
مطلب خیلی جالبیه. آینده ای نزدیک به دردم میخوره
ممنون
لقمان آوند ۲۲ تیر ۱۳۹۳، ۱۲:۰۵
سلام حامد جان
متاسفانه وقتم خیلی کمه وگرنه خیلی دوست دارم بیشتر بنویسم
افشردی ۲۰ تیر ۱۳۹۳، ۱۸:۱۶
سلام
خدا قوت، خیلی خوب و کاربردی بود.
محمد اسفندیاری ۲۰ تیر ۱۳۹۳، ۱۵:۳۰
ممنون از شما
بسایر عالی بود :?: