使用javascript滚动到元素时添加平滑效果

我编写了以下函数，每当单击某个按钮时，视图就会滚动到与“href”属性匹配的特定元素

我想给滚动添加一个平滑的效果。现在它只是转到元素

<script src="/javascripts/application.js" type="text/javascript" charset="utf-8" async defer>
    $(function() {

        $(".button").on("click", function( e ) {

            e.preventDefault();

            $("body, html").animate({ 
                scrollTop: $( $(this).attr('href') ).offset().top 
            }, 600);

        });

    });
</script>

$（函数（）{
$（“.button”）。在（“单击”上，函数（e）{
e、 预防默认值（）；
$（“body，html”）.animate（{
scrollTop:$（$（this.attr（'href'））.offset（）.top
}, 600);
});
});

---

感谢您的帮助。谢谢。

您的代码非常完美，只需像这样编辑代码（见下文）

您已经在加载外部脚本文件和内联脚本的脚本标记上写入了

$（函数（）{
$（“.button”）。单击（“click”，函数（e）{
e、 预防默认值（）；
$（“body，html”）.animate（{scrollTop:$（$（this.attr（'href'））.offset（）.top}，600）；
}); 
});

您可能可以在这里查找：等等，您的

元素既有

src

又有content，这意味着内容被忽略。将该JS代码移动到单独的

。但是请注意，CSS

滚动行为：smooth

不受很好的支持（在Safari、IE和Edge中不起作用）@KBell OP使用jQuery/animate解决方案，该解决方案在所有浏览器中都能正常工作。@ChrisG确实，它只是完成了一条被删除的注释。