わたしと納豆ごはん

納豆、Web、雑記など

【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
  }

});

先ほどとの違いは、移動先にトップも含まれていることです。あとリンク先が存在しないといった場合のエラーとかが出ないようにもしています。

これを使えば「トップに戻る」のスクリプトを一つ減らせるかもしれません。

「トップに戻る」にもこのスクリプトを使う場合は、フッターに挿入項目の、さらに最後に記述すれば良いと思います。


スクリプトは以上です。

もうちょっと(「リンク先を取得」とか)jQuery の実行回数を少なくすれば、ちょっとだけ動作が速くなりそうですが、今回は定番の方法にしてみました。

これにイージングのプラグインを入れると、移動するときのアニメーションのバリエーションが増えます。

けっこういろいろできそうですが、わたし自身はプラグインを使ったことがないので、導入するならこちらのサイトとかが役にたちそう。

参照サイト: jQueryのエフェクトに変化を加える「jQuery Easing Plugin」の使い方と、全33種類のエフェクトサンプルを作成してみた | OZPAの表4

まあ、ページ内リンクのスクロール移動で、あまりにもこったイージングもどうかと思いますが(笑)今回のスクリプトを使えば、とても簡単にはてなブログの脚注にもスクロール移動を実装できます。

スポンサーリンク