ページ内スクロールアンカーリンクにデータ属性を使う

ページ内スクロールアンカーリンクにデータ属性を使う



WordPressで目次を作るなら、Table of Contents Plusが定番のようです。

Table of Contents Plus
参考
Table of Contents Plus

目次を自動で生成する、強力でユーザーフレンドリーなプラグインです。 全てのページとカテゴリーリストを表示するサイトマップも出力することができます。

Table of Contents Plus WordPress.org

しかし、ここ3年間更新がされておらず、少し不安でもあります。
シンプルなプラグインで完成しているなら更新不要なのかもしれませんが。

そこで、簡易的な目次機能をあらかじめテーマに組み込もうと思います。

しかし、ここで非常にシンプルな問題にぶつかります。

アンカーリンクって、idが複数ある要素には設定することが出来ません。

どういうことかと言うと、

だと、リンク先で指定したidまでリンクするのですが、

のように、idに2つの値を入力していると無効になります。意外と初めて知りました。

その他、アンカーリンクを設定する方法として、name属性を追加する、というのもありますが、これは見出しにはルール上追加することが出来ません。

ちなみに、先程のTable of Contents Plusでは、見出しに対して中の文字列を新たにspanで囲ってidを追加しているようです。

<h2>見出し</h2>  => <h2><span id="i-1">見出し</span></h2>

しかし、これだと見出しのデザインに元々spanを使用しているとおかしくなりそうです(未検証)。

つ・ま・り
自動で本文中から見出しを取得して、目次を作成するためには、見出しにidが入っていてはならない。
ということになります。
しかしながら、長く運用しているうちに、見出しにidを指定したい、しなければならないことも起こり得ます。
目次というのはあくまで補足的に付加するものであって、idを割り当てる優先順位は低いです。
そうなると、idnameを使わないでアンカーリンクを実装しなければなりません。

では、どうしようか?

じっくり考えてみると、結局アンカーリンクはjQueryを使って移動時にアニメーションを付けてスムーズにスクロールするように設定する予定です。

であるならば、ターゲットは別にidで無くても、jQueryで取得出来る属性であれば何でも良いことになります。

ですので、ここでは独自のデータ属性値を使ってみようと。

ターゲット要素(ここではh2)にdata-id="#target"と記述して、jQueryの方でhref#targetを指定したaリンクをクリックしたらその位置までアニメーションスクロールするように設定しています。

これでもし見出しにidが指定されていても、邪魔することなく目次を追加出来るようになりました。

今日はここまで
ページ内スクロールアンカーリンクにデータ属性を使う

ページ内スクロールアンカーリンクにデータ属性を使う


開発

WordPressで目次を作るなら、Table of Contents Plusが定番のようです。 しかし、ここ3年間更新がされておらず、少し不安でもあります。 シンプルなプラグインで完成しているなら更新不要なのかもしれ…


関連する記事



こちらはいかが?


コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

*(必須)

*(必須・表示されません)