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

‏  4 دقیقه
۲۰ تیر ۱۳۹۳
اسکرول نرم با استفاده از چند خط کد 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>
نکته :

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

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

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

چه امتیازی به این مقاله می دید؟
نویسنده لقمان آوند
بیش از 15 سال هست که برنامه نویسی می کنم و از بین همه زبون هایی که کار کردم جاوا، اسمبلی و php رو دوست دارم. دانشجوی دکترای نرم افزارم و توی دانشگاه روی پردازش بیگ دیتا و پردازش موازی کار کردم و عاشق چالش از هر نوعیش هستم! سون لرن مثل بچه منه که 12 سال براش وقت گذاشتم، اینجا همه تلاش می کنیم از شروع یادگیری تا ورود به بازر کار حوزه برنامه نویسی و IT همراهتون باشیم.
ارسال دیدگاه
خوشحال میشیم دیدگاه و یا تجربیات خودتون رو با ما در میون بذارید :

 

نظرات کاربران

Kasra

سلام دوستان,
واقعا مطلب مهمی بود اما من یه مشکل دارم اونم اینه که اسکرول نرم انجام نمیشه(یعنی یواش یواش نمیره پایین و یکدفعه ای میپره) میخواستم ببینم مشکل از کجاست؟
تازه وقتی کدی که باید بعد اضافه کردن jquery بزاریمم حذف میکنم تغییری ایجاد نمیشه!

mohammad

سلام حالا اگه بخواهیم اسکرول کند یعنی در مدت زمان 2 ثانیه به پایین برود چکار کنیم ؟

مبین طارمی

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

وحید صالحی

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

سینا

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

dashjalal

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

وحید صالحی

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

aria

خــــــــــــیلی دستت درد نکنه.
دمت گرم داداشی. ❓

khashayar

سلام خسته نباشید… یه سوال داشتم من این کد و اضافه کردم خیلیم خوب کار می کنه… ولی اسلاید شو منو خراب کرد دیگه اسلایدم کار نمی کنه باید چیکار کنم؟

وحید صالحی

سلام چند دلیل میتونه داشته باشه یکیش این که باید چک کنید که تداخلی با فایل های اسلایدرتون نداشته باشه

خشایار

مرسی ممنون آره تداخل داشت با تگ iframe درستش کردم مرسی واقعا…

shima a

سلام خیلی ممنون کد مفیدی بود

parham

سلام ببخشید برای ایجاد جی کوئری یا نوشتن پلاگین باید خود جی کوئری فقط بلد بود؟

لقمان آوند

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

نیلوفر

مطلب خیلی مفیدی است
اما نمیدونم چرا برای من رفتن به بالا به آرامی انجام میشه ولی به آرامی پایین نمیاد!!!

وحید صالحی

سلام
نباید هم اینطور باشه:-) بالا و پایین نباید ترم و آرام باشه چون ماهیت کد همینه اونجا که مبینید در ابتدا به آرامی بالا میره مربوط به صفحه ریدایرکت سون لرن هست نه کد مذکور…

hannanstd

سلام .
چطور میشه کاری کرد که اگر در حین پایین اومدن کسی هرجا کلیک کرد اسکرول متوقف بشه؟

فرشد

ممنون .
امکان خیلی جالبی بود .

حامد مودی

سلام استاد بالاخره انگشت به کیبورد شدین!
مطلب خیلی جالبیه. آینده ای نزدیک به دردم میخوره
ممنون

لقمان آوند

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