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 ブラウザだけ、アニメーションしないようにしています。
早く治らないかなー。