无法使用 Jquery animate 函数实现平滑滚动

Question

伙计们，我试图在 JQuery 的帮助下在我的网页上实现平滑滚动功能。每当我单击导航项时，页面都应滚动到特定部分。但那并没有发生。这是我的 index.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

让它平稳运行的一种简单方法是将毫秒设置为 0 而不是 800，并将该scroll-behavior: smooth;属性添加到html标记中。

html {scroll-behavior: smooth;}

Answer 2

你可能想尝试这样的事情，

$(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;

}