Smoothscroll 在 chrome 中不起作用，但在其他浏览器中起作用

Question

我有一个按钮（它是一个 Font awesome 图标），如果你点击它它会滚动到特定的 div。在 Safari 中它可以工作，但现在我正在 Chrome 中测试它，它不起作用。

我正在使用的脚本(jQuery)

$(document).ready(function(){
$('a[href^="#"]').on('click',function (e) {
    e.preventDefault();

    var target = this.hash;
    var $target = $(target);

    $('html, body').stop().animate({
        'scrollTop': $target.offset().top
    }, 900, 'swing', function () {
        window.location.hash = target;
    });
});
});

按钮

<a href="#arrow-down-click">
<i class="fa fa-angle-down fa-4x arrow-down" aria-hidden="true"></i>
</a>

如何在 Chrome（以及我尚未测试过的其他浏览器）中使用它？

编辑（也在评论中）：

我刚刚发现：如果我将 css html { overflow: hidden; } 更改为 auto 并将 body { overflow: auto; } 更改为 hidden，则动画有效。但问题是：如果不使用按钮转到第 2 部分，我无法从上向下滚动，如果我在第 2 部分，我无法滚动到任何地方（所以不能返回顶部或第 3 部分）。 . 有人对此有想法吗？

编辑 2 现在我有这个：https://jsfiddle.net/jk1540oc/。它转到我指向的 div，但它不再具有动画效果（不在 Chrome 中，也不在 Safari 中）。您也无法使用按钮向下滚动两次。

Answer 1

我建议保留 html, body { overflow: hidden, height: 100% }，然后使用 { overflow: auto; height: 100% }

包装 div

<html>
  <body>
    <div id="site-wrapper"> everything in here </div>
  </body>
</html>

这是我使用了很长时间的模式，它让我省去了很多头痛。然后，在 div 上制作所有滚动动画。这是一个工作演示：

https://jsfiddle.net/b4uje52o/2/

Answer 2

我同意最初的问题有点含糊。但是，我有一个类似的问题 Chrome 没有使用 Javascript 实现 Smoothscrolling。我能够通过简单地将 html 中的 #link 替换为完整的 link 来解决问题。

根据你的问题：

<a href="#arrow-down-click"> <i class="fa fa-angle-down fa-4x arrow-down" aria-hidden="true"></i> </a>

我把#arrow-down-click改成了http://www.yourURLhere.com/#arrow-down-click

Answer 3

Follow image description with steps numbered here

如何在 Google Chrome 中启用或禁用平滑滚动 Windows

打开GoogleChrome.
将下面的link复制粘贴到Chrome地址栏，回车

chrome://flags/#smooth-scrolling

Select 您想要的平滑滚动设置的默认值、启用或禁用。

默认设置启用了平滑滚动，但当您打开太多选项卡时，它可能会自动禁用平滑滚动。

Smoothscroll 在 chrome 中不起作用，但在其他浏览器中起作用

Smoothscroll doesn't work in chrome but works in other browsers

javascript

jquery

html

css

smooth-scrolling