WordPressでアンカーリンクの飛び先を調整

前々からWordpressのアンカーリンクの飛び先が中途半端で困っていた。ちゃんとスクロールしているんだけど、画面上部に表示されるメニューが覆い被さっている。

---

スクリプトで調整

問題を解消しつつ、スタイリッシュにできる答えがここに。もう、ほぼまるごとこれでイケる。
TCD WordPress Theme / 【初心者向け】プラグイン不要でスムースにスクロール。WordPressでページ内リンク（アンカーリンク）を設置する方法。

関数はとてもシンプルで、そのまま丸コピするのはひどすぎるように思えたので、変更点だけを記載。

header.phpへの追記

<script>
…
        var speed = 500;
        var offset= 120;
…
        var position = target.offset().top - offset;
…
    return true;
…
</script>

スクロールスピードは「何ミリ秒でそのポイントに到達するのか」を表しており、少し短めに0.5秒。

本題のスクロールする先を調整するため、offset変数を用意した。うちのサイトだと120px程先に進んだ状態になる(スクロールする距離を短くする)とちょうど良かった。サイトの状態によって、ここを微調整すれば良いだろう。

最後、戻り値はtrueにした。このイベントを処理する他のものを「動かしたい」から。
具体的には、trueを戻すとブラウザのURL欄に #hogehoge といったアンカーが表示されるのだが、falseにするとアンカーは表示されない。

スクリプトの追加はheader.phpに保存するとすぐに反映される。

さいごに

この1年どうにかならないかと思っていた問題を一撃で解消してくれた今回の情報に感謝。
自分用メモだから、と我慢していた問題だったけれど、快適につかえるとやっぱり嬉しい。