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即可解决问题。

从你的问题：

<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

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

打开Google Chrome。
将下面的链接复制并粘贴到Chrome的地址栏中，然后按Enter。

chrome://flags/#smooth-scrolling

为所需的“平滑滚动”设置选择“默认”，“启用”或“禁用”。

默认设置启用了平滑滚动，但是当打开的标签过多时，它可能会自动禁用平滑滚动。

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

3 个答案: