わたしはWoradPressの記事に目次を表示させるために、RTOC（Rich Table of Contents）というプラグインを使っています。
今回（2021年11月12日）、書いた記事の目次リンクが書く見出しに遷移せず、全てページのトップ（上部）に戻ってしまうという問題が発生しました。
自分と同じように困っている人もいるかと思い、解決方法を記事にしました。
結論
最近バージョンアップした「Gutenberg」が原因でした。
Gutenbergのバージョンを11.9.0から11.7.0にダウングレードして解消しました。
（2022年5月1日追記）こちらの事象は「Gutenberg」の最新バージョン（13.1.0 ）で解消していることを確認しました。
発生した事象
目次のリンクが上に行ってしまうという事象です。
具体的に説明します。下記の画像を見てください。
このような見出しがあったとして、「03 ううう」をクリックしたら、見出しが「ううう」の場所に飛んで欲しいですよね。
ところが実際にクリックしてみると。
このようにページのトップに遷移してしまいます。
目次の全てのリンクが同じ状態です。
最近更新した記事のみで発生
この事象が発生したのは、わたしが最近更新した記事のみでした。
- 新しく作成した記事：問題あり（目次リンクが上に行ってしまう）
- 過去に作成した記事を更新した場合：問題あり（目次リンクが上に行ってしまう）
- 過去に作成した記事で何も更新していない場合：問題なし
過去に作成した記事で目次が正しく動いている場合でも、一度更新してしまうとそのページでも同じ問題が発生します。
この問題が発生したら、過去の記事をむやみに更新しないよう注意してください。
直接の原因は見出しの「id」
ページのリンク先を確認したところ、直接の原因は見出しのidがおかしいことによるものでした。
まず、正しく遷移する過去の記事のリンク先を調べてみます。（リンクの上にマウスを移動させると画面の左下に、そのリンク先URLが表示されます。）
記事のURL「https://hazukei.com/2288/」の後に「#rtoc-8」と記載されているのがわかります。
下記の図はHTMLのソースコードです。
それぞれの見出しに「rtoc-XX」というidが設定され、遷移できるようになっていることがわかります。
続いて、問題が発生しているページのリンクは下記になります。
ご覧の通りURLの後が「＃」だけになっており、これではページ上部に遷移してしまいます。
見出し部分のソースコードも見てみると
ご覧の通り、idに「ううう」という日本語が設定されています。
試しに見出しの文字列を「abc」のように半角アルファベットにしてみると、正しく遷移できることを確認できました。
Gutenbergをダウングレードして解決
ここまで調べて、エディタプラグインの「Gutenberg」を最近アップデートしていたのでこれが怪しいと感じました。
そこでGutenbergをダウングレード（バージョンを下げる）してみることにしました。（Gutenbergのダウングレード方法）
現在のバージョンが11.9.0だったので、そこから一つづつ落としていって、11.7.0のバージョンに戻したときに事象が解消することを確認しました。
ちなみに事象が解消した後、問題のある記事をただ再更新しただけでは、見出しリンクは元に戻りません。全ての見出しをもう一度作り直す必要があります。
もし、Gutenbergなんて使っていないという方で、この事象が発生した場合は、Gutenbergをインストールした上でダウングレードを試してみてください。
WordPressのデフォルトのエディタがGutenbergなので、自分でプラグインをインストールしていなくても勝手にGutenbergの最新版を使っている可能性があります。
まとめ
RTOCのリンクがページ上部に入ってしまうのは、見出しの「id」が正しく設定されていなかったことが原因。
見出しのidが正しく設定されていない原因はGutenbergのアップデートによるもの。
Gutenbergをダウングレードして解決。
