首页 > 解决方案 > 无法使用 Jquery animate 函数实现平滑滚动

问题描述

伙计们,我正在尝试借助 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

任何帮助,将不胜感激。谢谢

标签: jquerycss

解决方案


让它运行顺畅的一个简单方法是将毫秒设置为 0 而不是 800,然后将scroll-behavior: smooth;属性添加到html标签中。

html {scroll-behavior: smooth;}

推荐阅读