39
تشکر

اسکرول به یک بخش از سایت با استفاده از jQuery

جی کوئری

جی کوئری

حتما سایت هایی را دیده اید که با کلیک کردن روی یک لینک در واقع شما به یک بخش از همان صفحه اسکرول میشوید. این تکنیک در طراحی های پارالاکس همیشه استفاده میشود, اما میتوان از آن در هر جای دلخواه استفاده کرد.

در ادامه همراه ما باشید…

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

<section id="design"></section>

حالا برای تگ aیی که قرار است با کلیک بر روی آن به بخش مورد نظر اسکرول شویم هم یک ID در نظر میگیریم. این ID حتما باید ID همان بخش به علاوه link درانتهای آن باشد, همچنین یک کلاس به نام goToByScroll برای آن در نظر میگیریم.

<a id="designlink" class="goToByScroll" href="#">طراحی</a>

سپس بعد از اضافه کردن کتابخانه jQuery کدهای زیر را درون یک تگ script قرار میدهیم:

$(document).ready(function(){
  var goToByScroll = function(id) {
    id = id.replace("link", "");
    $("html, body").animate({scrollTop: $("#" + id).offset().top});
  }
  
  $('.goToByScroll').on("click", function(e){
    e.preventDefault();
    goToByScroll($(this).attr("id")); 
  });
});

نحوه کار به این صورت است که ما یک تابع ساختیم که id تگ aیی را که کلاس goToByScroll را داشته باشد میگیرد. سپس کلمه link را از انتهای آن برمیدارد (خط سوم), سپس با استفاده از متد animate و بدست آوردن top بخش مورد نظر با استفاده از متد offset صفحه را اسکرول میکند.

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

مشاهده دمو:

  • صابر می‌گه:

    سلام آقای شفیعی امکانش هست که همین نمونه را برای دانلود قرار دهید من هرچه در visual studio سعی کردم این نمونه را پیاده کنم نشد و کار نکرد HELP me …

    با تشکر

  • سهیل می‌گه:

    سلام یه سوال داشتم جناب شفیعی من بخوام دوتا سلکتورو به هم مرتبط کنم چی کار کنم مثلا بخوام با انتخاب یه radio button یک textfeild غیر فعال شه

  • ssrr33 می‌گه:

    دوست عزیز ای کاش کمی کاملتر توضیح میدادی من که جی کوئری نمیدونم ولی مجبور میشم در مواردی ازش استفاده کنم حداقل بدونم چه خبره؟ مثلا توی وردپرس بخوام استفاده کنم باید اینها رو توی چه فایلی بگذارم و چجوری فراخوانی کنم
    ممکنه راهنمایی کنی؟

    • محسن شفیعی می‌گه:

      دوست عزیز سادست. شما فقط باید اون کدهای جاوا اسکریپت رو داخل پوسته خودتون قرار بدید, بعد هر کجا که میخواهید استفاده کنید: باید ابتدا به بخش مورد نظر یک ID بدید سپس به متنی که میخواهید زمانی که روی آن کلیک شد به بخش مورد نظر بره همون ID رو بدید فقط آخرش کلمه link رو هم اضافه کنید و یک کلاس goToByScroll هم به اون بدید, بعد لذت ببرید.
      ——————
      کدهای جاوا اسکریپت رو باید داخل تگ script و در فایل header.php در پوسته وردپرس خودتون قرار بدید.
      قبلش یادتون نرفته باشه که کتابخانه jQuery رو فراخوانی کرده باشید.
      امیدوارم واضح شده باشه.


  • نظرات این مطلب بسته است.