Chromeでページトップにスムーススクロールした時起こる不具合

広告含む

2023年2月3日2023年10月24日

iOSのGoogle Chromeでページトップへスクロールをすると、コンテンツや固定ヘッダーがずれるという不具合を発見したので共有します。

WordPressのおすすめサーバー

特徴

料金が安い
WordPressが超高速
ドメイン永久無料
安心の実績とサポート体制

＼新規も乗り換えも／

エックスサーバー

aタグでトップにスクロールすると起こる現象

バグと思われる現象は２種類あります。

コンテンツの上に隙間が空く
固定ヘッダーが上にずれる

このような現象は、結構有名なサイトでも頻繁に見られます。

症状１：コンテンツの上に隙間が空く

スクロールすると、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;
});

スムーススクロールで検索すればよく出てくるコードです。

症状２：固定ヘッダーが上にずれる

こちらはスクロールの勢い（？）で、固定ヘッダーがグッと上にずれます。

この症状は、以下のようなコードを使用したときに発生します。

// #page-topをクリックした際の設定
$('#page-top').click(function () {
  $('body,html').animate({
    scrollTop: 0//ページトップまでスクロール
  }, 500);//ページトップスクロールの速さ。数字が大きいほど遅くなる
  return false;//リンク自体の無効化
});

詳しいコードは以下のサイトで解説されていますが、「この技術を使ったサンプルサイト」でも同じような症状が起きていました。

ページの先頭にスムーススクロール | 動くWebデザインアイディア帳

参考までに同じ症状で記事にしている方がいたのでリンクしておきます。

Google Chromeでスクロールするとコンテンツの高さがずれた時の対処法 – VEGLコンテンツ

試したこと

固定ヘッダーをposition:fixedからstickyにする
idの位置をbody、mainなどに変更する
他のコーダーさんに相談する

色々と試してみましたが改善しないため、別の手段を取ることにしました。

解決した方法

原因は不明のままですが、どうやらページの一番上まで到達するとfixedが揺れ動くようです。

ですので、ページトップから1px下を指定してあげるとfixedが動くことはありませんでした。

以下の記事が完全版です。

まとめ

色々と試行錯誤したことで、スムーススクロールについて深く知ることができました。

今回の原因を探るために結構長い期間を要したのでもう検証することはないでしょうが、もし何か発見しましたら記事にします。

カスタマイズを自分でしてみませんか？

「機能を追加したい」「もう少しデザインを調整したい」と思ったらWeb制作のスクール「デイトラ」がおすすめです。

どのコースも10万円前後と他のスクールに比べても格安で、副業や転職に十分なスキルが身に付きます。

気になった方は、是非アクセスしてみてください。

コースの一部

Chromeでページトップにスムーススクロールした時起こる不具合