iOSのGoogle Chromeでページトップへスクロールをすると、コンテンツや固定ヘッダーがずれるという不具合を発見したので共有します。
目次
aタグでトップにスクロールすると起こる現象
バグと思われる現象は2種類あります。
- コンテンツの上に隙間が空く
- 固定ヘッダーが上にずれる
このような現象は、結構有名なサイトでも頻繁に見られます。
症状1:コンテンツの上に隙間が空く

スクロールすると、Chromのアドレスバーが上下に伸び縮みする分だけコンテンツとの間に隙間が空いてしまいます。
こちらは以下のようなコードで発生します。
// #から始まるURLがクリックされた時
jQuery('a[href^="#"]').click(function() {
let header = jQuery("header").innerHeight();
let speed = 300;
let href = jQuery(this).attr("href");
let target = jQuery(href == "#" ? "html" : href);
let position = jQuery(target).offset().top - header;
jQuery("html, body").animate({
scrollTop: position
}, speed );
return false;
});
スムーススクロールで検索すればよく出てくるコードです。
症状2:固定ヘッダーが上にずれる

こちらはスクロールの勢い(?)で、固定ヘッダーがグッと上にずれます。
この症状は、以下のようなコードを使用したときに発生します。
// #page-topをクリックした際の設定
$('#page-top').click(function () {
$('body,html').animate({
scrollTop: 0//ページトップまでスクロール
}, 500);//ページトップスクロールの速さ。数字が大きいほど遅くなる
return false;//リンク自体の無効化
});
詳しいコードは以下のサイトで解説されていますが、「この技術を使ったサンプルサイト」でも同じような症状が起きていました。
参考までに同じ症状で記事にしている方がいたのでリンクしておきます。
試したこと
- 固定ヘッダーをposition:fixedからstickyにする
- idの位置をbody、mainなどに変更する
- 他のコーダーさんに相談する
色々と試してみましたが改善しないため、別の手段を取ることにしました。
解決した方法
原因は不明のままですが、どうやらページの一番上まで到達するとfixedが揺れ動くようです。
ですので、ページトップから1px下を指定してあげるとfixedが動くことはありませんでした。
以下の記事が完全版です。
あわせて読みたい


【完全版】スムーススクロールの実装は全てこれでいい【LazyLoad対応】
純粋なJavaScript(VanillaJS)で、LazyLoad(遅延読み込み)にも対応させたスムーススクロールの実装方法をご紹介します。 今回作成したスムーススクロールは、以下の…
まとめ
色々と試行錯誤したことで、スムーススクロールについて深く知ることができました。
今回の原因を探るために結構長い期間を要したのでもう検証することはないでしょうが、もし何か発見しましたら記事にします。
カスタマイズを自分でしてみませんか?
「機能を追加したい」「もう少しデザインを調整したい」と思ったらWeb制作のスクール「デイトラ」がおすすめです。
どのコースも10万円前後と他のスクールに比べても格安で、副業や転職に十分なスキルが身に付きます。
気になった方は、是非アクセスしてみてください。
コースの一部
ご質問などお気軽にコメントどうぞ