LoginSignup
2
2

More than 5 years have passed since last update.

Google Chrome で スクロールアニメーション付きのページ内ジャンプが動かない件

Last updated at Posted at 2017-10-03

2017/10/04:
現在進行形で未解決。

現象

ロングスクロールでレスポンシブな感じのWebサイトを制作・公開してるんですが、
依頼元から

「PCの Google Chrome だとヘッダのメニュークリックしてもスクロールしないんだけど」

とご報告頂きました。
まさかと思って動かしてみたところ、確かにヘッダメニューのリンクをクリックしても
ページ内のスクロール移動が動かない。
Chrome の Dev Tools で見てもエラー無し。

実装内容

アンカーリンク(メニュー)にハッシュ(#)付きのURLを書いて、リンクの on("Click") イベントで
スクロールアニメーション付きのページ内ジャンプを実装しています。

加えて、ページ最下部の「TOPに戻る」ボタンも。
こんな感じ。

sample.js
    $(".navtotop").on("click", function (e) {
        e.preventDefault()
        $("html, body").animate({
            scrollTop: 0
        }, 500);
    });

これも全く動きません。

原因

調べてみたら、以下のページに行きつきました。

document.body.scrollTop always is 0
https://bugs.chromium.org/p/chromium/issues/detail?id=766938

どうやらどうスクロールしても document.body.scrollTop が 0 を返している模様。
この記事投稿時の最新バージョン (61.0.3163.100) でも改善していません。

対処 ※ 暫定

暫定的対処として、ページ内リンクのスクロールアニメーションを外しました。
こんな感じ。無念。

sample.js
    // Chrome ブラウザ判定
    var isChrome = /Chrome/.test(navigator.userAgent) && /Google Inc/.test(navigator.vendor);

    $(".navtotop").on("click", function (e) {
        // 暫定的な対処 - https://bugs.chromium.org/p/chromium/issues/detail?id=766938
        if(isChrome) {
            window.href = "#wrapper";
        } else {
            e.preventDefault()
            $("html, body").animate({
                scrollTop: 0
            }, 500);
        }
    });

Chrome ブラウザだけ、アニメーションしないようにしています。

早く治らないかなー。

参考

2
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
2