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