Smoothscroll 不适用于 Chrome，但适用于其他浏览器

Question

我有一个按钮（它是一个很棒的字体图标），如果你点击它，它会滚动到一个特定的 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; } html { overflow: hidden; }到auto和body { overflow: 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 { overflow: auto; height: 100% }

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

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

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

Answer 2

按照图像描述和此处编号的步骤进行操作

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

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

chrome://flags/#smooth-scrolling

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

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

Answer 3

我同意最初的问题有点含糊。 但是，我在 Chrome 没有使用 Javascript 实现平滑滚动时遇到了类似的问题。 我能够通过简单地用 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

Smoothscroll 不适用于 Chrome，但适用于其他浏览器

问题描述

3 个解决方案

解决方案1
2 已采纳 2017-06-28 21:45:25

解决方案2
1 2020-09-10 19:22:43

解决方案3
0 2018-01-26 05:23:14

Smoothscroll 不适用于 Chrome，但适用于其他浏览器

问题描述

3 个解决方案

解决方案1 2 已采纳 2017-06-28 21:45:25

解决方案2 1 2020-09-10 19:22:43

解决方案3 0 2018-01-26 05:23:14

解决方案1
2 已采纳 2017-06-28 21:45:25

解决方案2
1 2020-09-10 19:22:43

解决方案3
0 2018-01-26 05:23:14