コーディングメモです。Googleで調べてみても、どうも解決しなくって、CSSをいじってたら、原因がわかりました。
IE11でもEdgeでもFirefoxでも効くし取得できるのに、chromeだけできなくてとても困りました。
前提条件
HTML5でマークアップするため、
<!DOCTYPE html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready( function(){
$("a[href^='#']").on( "click", function(){
var headerHight = $( "header" ).outerHeight();
var href = $(this).attr("href");
var target = $(href == "#" || href == "" ? 'html' : href);
var position = target.offset().top - headerHight;
console.log( "body.scrollTop : " + $( "body" ).scrollTop() +
"\nhtml.scrollTop : " + $( "html" ).scrollTop() +
"\ndocument.scrollTop : " + $( document ).scrollTop() +
"\nwindow.scrollTop : " + $( window ).scrollTop() +
"\nhtml,body.scrollTop : " + $( "body, html" ).scrollTop() +
"\ntarget.offset : " + target.offset().top +
"\nposition : " + position +
"\nheaderHight : " + headerHight
); // 確認用
$("body, html").animate({scrollTop:position + "px" }, 100, "swing");
return false; // イベントキャンセル用
});
});
</script>
<style type="text/css">
html,body{
height:100%;
width:100%;
}
header{
position: fixed;
top:0;
left:0;
height:1em;
}
#contents{
padding:1em;
}
</style>
</head>
<body>
<header>ヘッダー部<a href="#link1">リンク１</a></header>
<div id="contents">
<p>
あいうえお<br />
かきくけこ<br />
さしすせそ<br />
<span id="link1">たちつてと</span><br />
<!-- 実際はスクロールが出るまで改行を繰り返していますが、省略します。 -->
</p>
</div>
</body>
</html>
としています。
試したこと
jQueryのバージョンを変更
はじめは、jQuery-1.12.4を利用していました。開発中の対象ブラウザがIE8以降なので、1系統で開発しています。
テスト用にjQuery-3.2.1を適応させてみたのですが、Chromeではスクロールトップが効きません。
IE11、Firefoxでは問題なくscrollTopが効きます。
CSSを疑い始める
jQueryの問題ではなければ、CSSかマークアップにミスがあるのだと思い、CSSを削除してテストしていきました。
結果、下記の部分がだめみたいです。
html,body{
height:100%;
width:100%;
}
結論
html,bodyに、100%の高さを指定しない。overflow-yやoverflow-xを指定しない。
コメント
[…] https://se.ykysd.com/2017/04/27/chrome-scrolltop/ […]
この記事のおかげで解決しました！ありがとうございました！