تخفیف ویژه پیش ثبت نام شروع ثبت نام دوره متخصص جاوا

اسکرول نرم با استفاده از چند خط کد 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 ۰۹ آبان ۱۳۹۳، ۲۰:۵۲
سلام .
چطور میشه کاری کرد که اگر در حین پایین اومدن کسی هرجا کلیک کرد اسکرول متوقف بشه؟
فرشد ۲۲ تیر ۱۳۹۳، ۰۸:۴۶
ممنون .
امکان خیلی جالبی بود .
حامد مودی ۲۱ تیر ۱۳۹۳، ۱۰:۱۷
سلام استاد بالاخره انگشت به کیبورد شدین!
مطلب خیلی جالبیه. آینده ای نزدیک به دردم میخوره
ممنون
لقمان آوند ۲۲ تیر ۱۳۹۳، ۱۲:۰۵
سلام حامد جان
متاسفانه وقتم خیلی کمه وگرنه خیلی دوست دارم بیشتر بنویسم
افشردی ۲۰ تیر ۱۳۹۳، ۱۸:۱۶
سلام
خدا قوت، خیلی خوب و کاربردی بود.
محمد اسفندیاری ۲۰ تیر ۱۳۹۳، ۱۵:۳۰
ممنون از شما
بسایر عالی بود :?: