ページ遷移後にスムーススクロールがしたかった

ページ遷移後に 、任意IDの場所までスムーススクロールをさせたいという要望があり、調べたのでメモ

まず、要件をまとめます。 - 対象ブラウザは、IE8〜11、Chrome、Firefox、Safari - ページ遷移したあとで、任意の場所にスムーススクロールをさせたい - URLには、パラメータ（?◯◯）が付くので、ハッシュ（#◯◯）という形にして欲しい

同一ページ内のスムーススクロールならさほど難しくないが、ページ遷移を挟むとちょっと難しい。

調べてみると以下のページが見つかる。 リンク先のページでスムーズスクロールさせる方法
【jQuery】ページ遷移後のスムーススクロール簡易型？になったと思います。

うーん、悪くはないのですが、今回の要件は、#で遷移できるようになので、今回は見送ります。

こんな時は英語で検索。「jquery smooth scroll other page」で検索すると、Stack Overflowにいいのが見つかりました。

jquery page scroll to different page

デモはこんな感じ。
デモ

確かにページ遷移してもスムーススクロールが動作しています。

ここで使われているソースをちょっと修正したのが、以下のソースです。

// ページ遷移後にスムーススクロール
jQuery(function($) {
  // 関数jumpを定義
  var jump=function(e) {

  // #で始まるURLの場合
  if (e){
    e.preventDefault();
    var target = $(this).attr('href');
  }else{
    // targetに別ページにある#を代入
    var target = location.hash;
  }

  // 変数targetの位置までスクロール
  $('html, body').animate({
    scrollTop: $(target).offset().top
    },800,function() {
      // スクロールしたあとにハッシュを変更
      location.hash = target;
    });
  };

  // ハッシュがページを開いたときに動作しないように、htmlとbodyを削除
  $('html, body').hide();

  $(document).ready(function() {
    // #から始まるリンクをクリックした場合、関数jumpを実行
    $('a[href^=#]').bind('click', jump);

    // URLにハッシュがあれば以下を実行
    if (location.hash){
      // 0秒後に実行
      setTimeout(function(){
        // 一度、ページの一番上まで移動して、html、bodyを表示。その後関数jumpを実行
        $('html, body').scrollTop(0).show();
        jump();
      }, 0);
    }else{
      // #がURLにない場合、そのままhtml、bodyを表示
      $('html, body').show();
    }
  });
});

無事実装できました。
迷ったときは、がんばって英語のリソースを当たることも必要ですね。