【jQuery】はてなブログの脚注も、するするスクロール移動するスクリプト

今回は久々に、はてなブログのカスタマイズ系の記事です。

はてなブログでは「脚注」や「目次」を設置する機能があり、これでページ内リンクを設置できます。

で、このページ内リンクですが、サイトによってはスルスルとスクロールして移動する所がありますよね？

このスクリプト自体は検索すればいっぱい出てきますが、はてなブログではどうもうまくいかない。仕組み上、特に脚注のリンクなどは上手く動かない。

それを、はてなブログの脚注でもスルスル移動するようにしたので、それの紹介です。

まずは jQuery から。ページ内リンクは jQuery で実装するとすごく簡単です。

jQuery ですので、jQuery 本体のコードを読み込ませないといけません。今回わたしが使った jQuery はこちらのバージョン。

<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.4.min.js"></script>

このコードを、実行したいスクリプトの前に記入して下さい。

また、はてなブログではシステムの関係上、デフォルトで jQuery を読み込んでいます。そちらを利用しても動かすことができますが、ページが読み込まえた後にスクリプトが実行されるようにしなくては動きません。

方法はいろいろありますが、例として次のようにしたらスクリプトがページ読み込み後に実行されます。

//ページ読み込み後に中のスクリプトを実行するスクリプト
window.addEventListener( "load", function(){

  // スクリプト

});

ただしこの方法は、はてなブログのシステムに依存してますので、はてな側で変更などあった場合にちゃんと動かなくるということもあります。jQuery の2度読み込みとかは避けることはできますが。

脚注もスクロール移動するスクリプト

それでは本題です。

まずシンプルに、投稿記事の中のページ内リンクだけスムーズに移動するスクリプトです。

$( ".entry-content a[href^='#']" ).on( "click", function( e ) {

  ( e.preventDefault ) ? e.preventDefault(): e.returnValue = false;
  var speed = 500;  // 移動速度
  var href = $( this ).attr( "href" );
  var target = $( href + ",a[name='" + href.slice( 1 ) + "']" );
  var position = target.offset().top
  $( 'html,body' ).animate( { scrollTop: position }, speed, "swing");
  return false;
  
});

よくあるページ内リンクをスムーズに移動するスクリプトに、はてなブログで脚注のも対応できるよう少し手を加えています。

最初と最後にデフォルト機能のページ内リンクの移動をキャンセルさせるコードがあります。よくあるものではreturn false;だけで良いそうなのですが、それだけではデフォルトのページ内リンクが作動することもあるようで、このようにすれば確実なのだそうです。

参考リンク： [JavaScript] e.preventDefault とか e.stopPropagation とか return false - Qiita

ページ内リンクの検索対処は entry-content クラス内のものだけにしています。なので、コードを書き込む場所は記事下でもフッターでもおっけー。基本記事しか検索しないので、記事下に書き込んだほうが誤作動など心配がなく、安心かもしれません。

なお、こちらはサンプルページを作りました。どんなもんかをこちらにて確認できます。

リンク：サンプルページ

さらに「トップに戻る」も追加したスクリプト

この感じなら「トップに戻る」といったページ内リンクもこのスクリプトに組み込めそうです。

それを考慮して作ったものが、こちら。

$( "a[href^='#'],a[href='']" ).on( "click", function( e ) {

  var speed = 500;  // 移動速度

  var href = $( this ).attr( "href" );  // リンク先を取得

  // 移動先の判定
  if ( href == "#" || href == "" ) {
    href = "html";
  } else if ( href == "#top" && !$( "#top,a[name='top']" )[0] ) {
    href = "html";
  } else {
    href = href + ",a[name='" + href.slice( 1 ) + "']";
  }

  // 要素を取得
  var target = $( href );

  // 移動処理
  if( target[0] ) {  // 移動先があるか確認

    ( e.preventDefault ) ? e.preventDefault(): e.returnValue = false;  // イベントキャンセル 1

    var position = target.offset().top;  // 移動先を取得

    $( "html,body" ).animate( { scrollTop: position }, speed, "swing");  // 移動

    return false; // イベントキャンセル 2
  }

});