使用 JS 平滑滚动一页网站上的特定链接答案

【问题标题】：Smooth Scroll Specific Links on One Page Website with JS使用 JS 平滑滚动一页网站上的特定链接
【发布时间】：2019-06-06 21:09:32
【问题描述】：

我正在尝试从导航平滑滚动到容器 ID，并且页面正在滚动。但是，我有一个引导程序“列表组”，它也在容器中使用 href 和 id。当我单击列表组中的 href 时，它会平滑滚动和错误。有没有办法为导航平滑滚动特定 ID 并阻止列表组对 JS 做出反应？

我已经尝试过了，但它似乎不起作用smooth scroll to div with jquery

试过html { scroll-behavior: smooth;}，但不是在所有浏览器上都兼容

使用此代码，它可以工作，但会出错how css smooth scroll jquery

链接到本网站的 index.html，正文中带有 .js：index.html

感谢您的帮助

【问题讨论】：

【解决方案1】：

有两种方法可以避免在列表组以外的链接上触发平滑滚动。

1) 仅将此功能应用于导航建议的路线：

$('a.nav-link').on('click', function(event) {
    ...
})

2) 应用于排除列表组项目的所有链接：

$('a').not('[data-toggle]').on('click', function(event) {
    ...
})

【讨论】：