ページ遷移時のページ内リンクのスムーススクロール

2021.05.29 修正
codepenのサンプル内からのリンクを別タブで開くと警告されるようになったので、
別でサンプルHTMLを準備しました

---

よく出回ってるhoge.html?id=sec01など、URLのクエリパラメータでIDを指定するようなURLでページ内アンカーをさせるやり方はアクセシビリティ、マシンリーダブルの面では疑問です。
JavaScriptをOFFにされてもきちんと動作し、またGoogleなどのbotにも適切な箇所にリンク先を指定できるページ内アンカー(#id)で指定する方が好ましいと個人的に考えてます。

✕悪い例
<a href="hoge.html?id=sec01">
◎良い例
<a href="hoge.html#sec01">

なので素直にハッシュ(#)でID指定してページが自動スクロールするJavaScriptをjQueryで書きました。

Sample

https://codepen.io/garyuten/pen/rwOGzJ?editors=1111
サンプル内のリンクを右クリック→別タブで開く でスクロールするのがわかると思います。

このリンクを別ウインドウで開いてみてください。ページ下までスムーススクロールするはずです。
https://blog.cgfm.jp/garyu/appendix/sample/jquery/page-scroll.html#page06

CodePenのサンプルコード

See the Pen smooth-scroll to page anchor on pade load by Garyuten (@garyuten) on CodePen.

JavaScript

$(document).ready(function(){
  //URLのハッシュ値を取得
  var urlHash = location.hash;
  //ハッシュ値があればページ内スクロール
  if(urlHash) {
    //スクロールを0に戻す
    $('body,html').stop().scrollTop(0);
    setTimeout(function () {
      //ロード時の処理を待ち、時間差でスクロール実行
      scrollToAnker(urlHash) ;
    }, 100);
  }
  
  //通常のクリック時
  $('a[href^="#"]').click(function() {
    //ページ内リンク先を取得
    var href= $(this).attr("href");
    //リンク先が#か空だったらhtmlに
    var hash = href == "#" || href == "" ? 'html' : href;
    //スクロール実行
    scrollToAnker(hash);
    //リンク無効化
    return false;
  });
  
  // 関数：スムーススクロール
  // 指定したアンカー(#ID)へアニメーションでスクロール
  function scrollToAnker(hash) {
    var target = $(hash);
    var position = target.offset().top;
    $('body,html').stop().animate({scrollTop:position}, 500);
  }
})