• illustrator Curse
  • 7Learn Android Course
  • 7Learn SEO Course
  • 7Learn WP Theme Course

    حرفه ای ترین دوره آموزش طراحی قالب وردپرس



  آیا می دانید با دوره های آموزشی سون لرن می توانید از 0 تا 100 طراحی وب را در منزل فراگیرید!

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

18 7898 ۲۰ تیر ۹۳

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

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

 

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

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

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

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

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

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

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

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

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

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

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

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

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

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

:: مطالب جدید سون لرن را از طریق ایمیل دریافت کنید :

دیدگاه ها 18 دیدگاه برای این مطلب ارسال شده است.

  • ‏‏

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

  • ‏‏

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

  • ارسال دیدگاه

    ورود/عضویت سریع با اکانت فیسبوک/جیمیل شما

    :: شما می توانید با استفاده از اکانت یاهو یا جیمیل خود به صورت کاملا امن، سریع و بدون نیاز به ورود اطلاعات عضو و وارد سایت شوید. در این صورت هیچ نیازی به ورود نام کاربری و رمز عبور خود نخواهید داشت و هویت شما از طریق ایمیلتان مورد تائید قرار می گیرد .
    برای استفاده از این روش باید در اکانت گوگل(جیمیل) و یا یاهوی خود لاگین باشید .
    عضویت/ ورود سریع با :
    در حال اتصال ...

    ورود به سایت

    ورود سریع با :
    در حال اتصال ...

    جستجو در سون لرن

    عبارت :
    7LearnTelegram