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

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

Table of Contents Plus https://ja.wordpress.org/plugins/table-of-contents-plus/

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

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

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

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

アンカーリンクって、

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

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

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

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

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

自動で本文中から見出しを取得して、目次を作成するためには、見出しにidが入っていてはならない。

ということになります。

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

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

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

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

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

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