Невозможно реализовать плавную прокрутку с помощью функции Jquery анимации

Question

Ребята, я пытаюсь реализовать функцию плавной прокрутки на своей веб-странице с помощью JQuery.

Каждый раз, когда я нажимаю на навигационный элемент, страница должна прокручиваться до определенного раздела. Но этого не происходит.

Вот мой индекс. js код

$("#navbar a, .btn").on("click", function (event) {
  if (this.hash != "") {
    event.preventDefault();
    const hash = this.hash;

    $("html", "body").animate(
      {
        scrollTop: $(hash).offset().top - 100,
      },
      800
    );
  }
});

вот ссылка на веб-сайт, попробуйте нажать на любой из элементов навигации и посмотреть. https://umakanth-pendyala.github.io/Edge-Ledger/

Вот ссылка на мое репо https://github.com/umakanth-pendyala/Edge-Ledger.git

Любая помощь будет принята с благодарностью. Спасибо

Answer 1

Вы можете попробовать что-то вроде этого,

$(document).ready(function(){
  // Add smooth scrolling to required elements, here I've considered all the buttons with 
  //class name 'button'
  $(".button").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
  });
});

Или, в качестве альтернативы, добавить плавную прокрутку ко всему документу.

html {
  scroll-behavior: smooth;
}

Answer 2

Простой способ заставить его работать плавно - установить миллисекунды равными 0 вместо 800 и добавить свойство scroll-behavior: smooth; в тег html.

html {scroll-behavior: smooth;}