Help us understand the problem. What is going on with this article?

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

More than 1 year has passed since last update.

よく出回ってる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

以下のURLにアクセスすると指定ページまでスクロールします。
https://s.codepen.io/boomerang/iFrameKey-cc3e6142-0f16-aee0-062d-a766a696bad8/index.html?editors=1111#page05

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);
  }
})
Garyuten
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away