‹ www.michinoeki-mania.com

ブログの目次と見出しとの間をヌルっと移動できるようにしてみました

Mar 03, 2017

はい。
毎回ブログには適当に見出しを付けているわけですが、前回のエントリあたりからその見出しのための目次を最初に書くようにしました。
で、今回はその目次から見出しへ、見出しから目次へと簡単にヌルっと移動できるようにしてみたというお話です。

====

そもそもどんな動きなのか

目次と見出しとの間をヌルっと移動 と言ってもよくわからないかもしれないので、実際に動きを見てもらったほうが早いと思います。

この記事の目次の各見出し部分をタップ(クリック)すると、記事中の各見出し部分にヌルっと移動します。 また、記事中の各見出しの右側の上矢印のようなアイコンをタップ(クリック)すると、目次部分にヌルっと移動します。

はてなのブログエディタ内に目次を作成するボタンがありますが、それで作成した場合、目次から各見出しの位置へ移動するときに別ページに飛んだときのような雰囲気になります。(実際は同じページ内で表示位置が変わっているだけですが)

また、一旦目次から各見出し位置へ飛んでしまうと、もう一度目次へ戻ろうとしたときに手でスクロールする必要があります。 個人的にこれは面倒なので、今回の実装にいたったわけです。

javascriptの記述

ではさっそく実装方法に移りたいと思います。 今回も、前回のカテゴリセレクトボックス設置のときのように、以下に記述する内容をコピペしてもらうだけで実装できるようになっています。

記述はjavascriptとcssに分かれますが、記述する場所はどちらも ダッシュボード>設定>詳細設定>headに要素を追加 の部分です。

まずはjavascript部分。

|javascript|

||<

1行目のjQueryの読み込みについては既に記述されている場合は不要です。

で、何をしているかというと、

  • 目次の見出し部分をタップ(クリック)した時に、記事中の見出し位置へヌルっとスクロール
  • 記事中の h1またはh2要素のうしろに上矢印アイコンを追加して、このアイコンがタップ(クリック)された時に、目次位置へヌルっとスクロール

ということをしています。(ざっくりと)

cssの記述

続いてcssの記述です。

|css|