اسکرول انیمیشنی در صفحات وب

اسکرول انیمیشنی در صفحات وب

در وبسایت‌هایی که تک صفحه هستند معمولا منوهای مختلف به جای لینک شدن به صفحات دیگر به صفحه‌ی جاری و یکی از مقادیر idها لینک می‌شود تا کاربر با کلیک روی آن به بخش مورد نظر منتقل شود. در حالت عادی این انتقال به صورت درجا اتفاق می‌افتد؛ ما در این نوشته به شما نحوه‌ی اسکرول شدن انیمیشنی بین بخش‌های مختلف صفحه‌ی وب را آموزش خواهیم داد. این آموزش با دو روش css و javascript انجام می‌شود که البته هر کدام آن‌ها به تنهایی کافی هستند اما در صورتی که جاواسکریپت مرورگر کاربر خاموش شود ممکن است javascript کار نکن و در صورتی که کاربر مرورگر قدیمی دارد، ممکن است روش css کار نکند. موضوع ساپورت شدن توسط کاربران یک بحث سواست اما ایجاد این امکان برای اکثر کاربران قابل مشاهده است و نیاز به نگرانی خاصی نیست زیرا آن دسته از کاربرانی هم که نتوانند این موضوع را حس کنند به صورت عادی روی بخش‌ها پرش می‌کنند و تنها انیمیشنی بودن این کار را مشاهده نخواهند کرد.

اسکرول انیمیشنی در صفحات وب

خب اگر کمی با وب کار کنید کد زیر را متوجه خواهید شد:

<a href="#camelcase">برو به فلانجای صفحه</a>

<div id="camelcase">
اینجا فلان جای صفحه است.
</div>

کد بالا یک تگ a که مربوط به هایپرلینک‌ها است را دارا است که اگر به خصیصه‌ی href آن نگاه کنید در داخل آن هیچ آدرسی موجود نیست و تنها مقدار #camelcase در آن موجود است و در خطی پایین‌تر یک تگ div داریم که id آن برابر camelcase است. در حالت عادی کاربر با کلیک روی عبارت برو به فلان‌جای صفحه به جایی که یک id با مقدار مورد نظر را پیدا کند خواهد رفت که البته این به صورت پرش یکجا است. اگر نیاز دارید این پرش را به صورت اسکرولی انجام دهید از روش‌های زیر استفاده کنید:

اسکرول انیمیشنی به بخش‌های صفحه با جاوااسکریپت

برای این‌کار کافی است قطعه کد زیر را داخل تگ head صفحه‌ی خود قرار دهید:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  // Add smooth scrolling to all links
  $("a").on('click', function(event) {

    // Make sure this.hash has a value before overriding default behavior
    if (this.hash !== "") {
      // Prevent default anchor click behavior
      event.preventDefault();

      // Store hash
      var hash = this.hash;

      // Using jQuery's animate() method to add smooth page scroll
      // The optional number (800) specifies the number of milliseconds it takes to scroll to the specified area
      $('html, body').animate({
        scrollTop: $(hash).offset().top
      }, 800, function(){

        // Add hash (#) to URL when done scrolling (default click behavior)
        window.location.hash = hash;
      });
    } // End if
  });
});
</script>

پیشنهاد نویسنده‌: در ارتباط با تفاوت جاوا با جاوااسکریپت بخوانید.

اسکرول انیمیشنی به بخش‌های صفحه با css

برای انجام این‌کار با کمک کدهای css کافیست قطعه کد زیر را داخل استایل صفحه‌ی خود قرار دهید:

html {
  scroll-behavior: smooth;
}

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

• قطعا کد css سبک‌تر است و بار اجرایی کم‌تری خواهد داشت.
• اگر مرورگر کاربر قدیمی است مخصوصا زمانی که با internet explorer به سایت شما مراجعه می‌کند ممکن است کد css کار نکند.
• اگر کاربر جاوااسکریپت مرورگر خود را غیرفعال کند، کد javascript بالا کار نمی‌کند.
• استفاده از هر دو کد به طور همزمان نیازی نیست و در صورتی که استفاده کنید هم مشکلی برای شما به وجود نخواهد آورد.

اگر روش‌های دیگری برای انجام این‌کار سراغ دارید برای ما در بخش نظرات این نوشته ارسال کنید تا با نام خودتان به این نوشته اضافه کنیم.