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

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

در وبسایت هایی که تک صفحه هستند معمولا منوهای مختلف به جای لینک شدن به صفحات دیگر به صفحه ی جاری و یکی از مقادیر 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 بالا کار نمی کند.
• استفاده از هر دو کد به طور همزمان نیازی نیست و در صورتی که استفاده کنید هم مشکلی برای شما به وجود نخواهد آورد.

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

موفق باشید.