開発

WordPressでページ内リンクを貼るとスクロール位置がずれる問題の解決方法

投稿日:

WordPressでページ内リンクを設定するとスクロール位置がずれてしまうという問題が発生しました。

WordPressのバージョンやテーマにもよるかもしれませんけど、今回は設定だけであっさり直すことできたのでその方法を記載します。

ページ内リンクとWordPressの設定

ページ内リンクの設定方法

ページ内リンクの書き方にはいくつか種類があります。WordPressの場合はname属性では動かなかったのでid属性を使うことにしました。

W3CによるとHTML5ではname属性は廃止されているとのこと。ブラウザによってはまだ使えますが、今後はid属性を使うのが正しいです。

リンク元には次のように書きます。

<a href="#summary">まとめ</a>

「summary」は他と被らないように自分の好きな名前を付けてください。前に#(シャープ)を入れるのを忘れずに。

次にリンク先には次のように書きます。

<h2 id="summary">まとめ</h2>

先ほど付けた名前をid属性に設定します。わざわざdivタグやaタグを新規で書かなくても飛び先に既存のタグがあれば、id属性を追記するだけでOKです。

これでページ内リンク完了…のはずでした。

WordPressの設定

上記の方法で無事にスクロールするようになりました。WordPressはデフォルトでスムーズスクロールが設定されているのでjQueryをわざわざ入れる必要もありません。

※WordPressのバージョンやテーマにもよるかもしれません

ところが、どうにもスクロール先の位置が合いません。それも少しじゃなくかなり下の方に行ってしまいます。

そこでWordPressの設定を見てみるとそれらしい項目がありました。

スムーズスクロールのオフセット

「設定」→「目次」の下の方に「スムーズスクロールのオフセット」という項目があり、デフォルトで30になっていたので、これを0にするとスクロール位置が合うようになりました。

※キャッシュの設定によってはすぐに反映されない場合があるのでご注意ください。Chromeの場合はF12を押してデベロッパーツールを出し、リロードボタンの上で右クリックし、「キャッシュの消去とハード再読み込み」をおこなうと確実です。
※WordPressにログインしていると上部の黒い帯に少し隠れてしまいますので、他のブラウザなどでも確認してみてください。

当ブログはサイト上部にメニューを設定していなかったので0にしましたが、メニューを設定していて位置が合わないという場合は、このpxをメニューの高さに合わせて調整すると位置が合うと思います。

WordPressを使っていないHTMLで構築されたサイトの場合

通常のHTMLで作られたサイトでも上部に固定のヘッダーやメニューを表示していると、その下に隠れてしまってページ内リンクの位置が合わないというケースは多かったりします。

特に最近ではスマートフォンサイトで固定メニューを表示することが多いので調整が必要になります。

その場合は飛び先のタグにcssでpaddingやmarginを設定することでスクロール位置を調整することができます。

#summary {
padding-top: 100px;
margin-top: -100px;
}

こうすることでページ上の見た目を変えることなく、スクロール位置を調整することができます。100pxの部分はヘッダーやメニューの高さを設定します。

他にもJavaScriptで調整する方法などもありますが、上記が一番シンプルで工数がかからないため、上手くいかなかった場合に他の方法を検討してみてください。

-開発
-,

Copyright© Workerブログ|仕事を続けるための工夫 , 2020 All Rights Reserved Powered by STINGER.