Javascript Chromeでページトップに戻る(scrollTop)が効かなくなってた件。

Chromeで以前作ったサイトを見ていて、jQueryで実装していたページトップに戻るが効かなくなっているのに気づいてしまいました...

スペック

Mac OSX
Chrome v61.0.3163.91

$('body').scrollTop() が効かなくなっていた。

今までは、FireFoxとIE系はhtmlタグで、webkit系はbodyタグでscrollTopが動作していたので、$('html, body') とするとコールバックが2回呼ばれてしまうのが嫌だったので👇 の様な感じでブラウザ判別してscrollTopを使用するタグを切り替えていました。

var scrollTag = ( window.chrome || 'WebkitAppearance' in document.documentElement.style )? 'body' : 'html';

$(scrollTag).animate({
  scrollTop: 0
}, 'fast', function() {
  console.log('callback');
});

Chromeでは上記の判定で scrollTag は bodyになっているので、$('body').scrollTop() が効いているか調べてみると...

// Chrome
$('body').scrollTop(); // => 0 ※常に0が返る

Chromeのアップデートで仕様変更になったようで、Firefoxを同じでhtmlタグでscrollTopが動作するようになり、$('body').scrollTop() が常に0になってしまうようになっていた為に「ページトップに戻る」が動作しなくなっていたようです... (いつのアップデートで変更になってたんだろう？？？

ブラウザごとの scrollTop の効くタグを調べてみる。

改めて、どのブラウザがbodyで動作するのか、htmlで動作するのかを調べてみました。
※ IE系が手元に無いので、調べ次第追加します。

👇 codepen に簡単なHTMLとscriptを作成して、各ブラウザでチェックしてみて動作する方のタグを調べます。にちょっとしたチェック用のHTMLとかJSをcodepenに作っておくと緊急時に割りとお役立ちなのです！

See the Pen scroll test HTML or BODY? by KIKIKI (@chaika-design) on CodePen.

ブラウザ	バージョン	html	body
Chrome	61.0.3163.91	○	×
Safaei	10.1.2	×	○
Firefox	55.0.3	○	×
Vivaldi	1.12.955.36	○	×
Opera	47.0.2631.83	×	○
Safari (iPhone)	10.0	×	○
Edge	41.16299	×	○
IE	11.125	○	×

以前調べた時と違って、Chrome、Vivaldi では body タグではscrollTopが効かなく、htmlタグで効くようになっていました。
追記 IE, Edgeを調べました。 IEはhtmlでEdgeはbodyで動作するようです... MS君は何故自社ブラウザで挙動揃えないのよ....

scrollTopを使用するタグのブラウザ別判定を変更する。

使用していたscrollTopを使用するタグを決めるブラウザ判定のスクリプトを変更します。

~~※ IE・Edgeは調べてません~~ 調べました。2018.04.06

var ua = navigator.userAgent;
var scrollTag = (( !window.chrome && 'WebkitAppearance' in document.documentElement.style ) || ( ua.indexOf('OPR') !== -1 || ua.indexOf('Edge') !== -1 ))? 'body' : 'html';

OperaとEdgeが少し厄介で。window.chrome オブジェクトを持っているけど、body タグにしなければならないので、OperaとEdgeの判定のためだけにユーザーエージェントを利用して (ua.indexOf('OPR') !== -1 || ua.indexOf('Edge') !== -1) で常にbodyになるようにしてあげる必要がありました。

OperaとEdgeの問題があるのでif文で書いてしまう方が見やすいような気がします。

var ua = navigator.userAgent;
var scrollTag;
if( ua.indexOf('OPR') !== -1 || ua.indexOf('Edge') !== -1 ) {
  scrollTag = 'body';
} else {
  scrollTag = ( !window.chrome && 'WebkitAppearance' in document.documentElement.style )? 'body' : 'html';
}