الانتقال بسلاسة (انزلاق) في صفحة الويب

يمكننا استخدام الخاصية في CSS:

html {
  scroll-behavior: smooth;
}

تدعمها معظم المتصفحات.

يمكنك ذلك من خلال css باستخدام الأمر التالي

html {
  scroll-behavior: smooth;
}

أو اذا كنت تستخدم jquery فيمكننا ذلك باستخدام animate وميزة هذه الطريقة أننا نستطيع التحكم في سرعة المتصفح أثناء الصعود والنزول 

<script>
$(document).ready(function(){
  $("a").on('click', function(event) {

    if (this.hash !== "") {
      event.preventDefault();

      var hash = this.hash;

      $('html, body').animate({
        scrollTop: $(hash).offset().top
      }, 800, function(){

        window.location.hash = hash;
      });
    } 
  });
});
</script>

يمكنك القيام بذلك بأكثر من طريقة، 

إحداها استخدام الخاصية scroll-behavior في css و لكن هذه الخاصية ليست مدعومة بالكامل من قبل جميع المتصفحات الآن، لذلك ستحتاج لاستخدام جافاسكريبت، و يمكنك القيام بذلك باستخدام التابع scrollIntoView كما يلي:

const ScrollToAnchor = () => {
  
  // نقوم بتحديد عناصر قائمة التنقل
  const navLinks = document.querySelectorAll(".menu__link");
  
  // للاستماع لحدث النقر على عنصر قائمة التنقل event listener  نقوم بإضافة 
  
  navLinks.forEach((link) => {
    
    link.addEventListener("click", (e) => {
      e.preventDefault();
      
      // نقوم بتحديد العنصر الذي تم النقر عليه
      const linkParentElement = e.target.parentElement;
      
      // نقوم بالانتقال بسلاسة إلى القسم المرتبط بالعنصر الذي تم النقر عليه
      document
        .getElementById(linkParentElement.dataset.link)
        .scrollIntoView({ block: "center", behavior: "smooth" });
    });
  });
};