スムーススクロールをjQueryで設定

スムーススクロールをWordPressのプラグインを使わずにjQueryで設定します。
この記事を書こうと思ったのは自分の頭の固さに笑えてしまったから。
参考にさせていただいたサイトに感謝します。

プラグインで良いのでは

WordPressでもスムーススクロールのプラグインはあります。
それで良いのではないかと思います。
実際このHaradaWebのサイトでもプラグインを使ってスムーススクロールを設定していました。

しかしプラグインではページ内のリンクによる移動を、hタグ(h2やh3)の見出しの手前で止めることはできず、サイトメニューを画面のトップ位置に固定している場合、hタグがメニューの下の隠れてしまう事があります。

又競合しているプラグインによっては反発してしまって動きがおかしくなる時があります。

hタグの見出しが見えるように

プラグインでhタグの手前で止めるには、CSSを細工すれば止められます。
hタグ内にspanを入れてそこに下記のCSSを設定します。

しかしこれはお勧めできません。
このCSSを設定すると前の要素の上にこのCSSが乗っかってしまって、前の要素が正常に動作しません。

jQueryで手前で止める

プラグインを使わず、自分でjQueryを設定します。

他のjQueryの邪魔をしない様にと考えると設定するのはフッターphpが良いのではないかと思います。