【jQuery】ページ内リンクをスムーススクロールでするする移動させる

ページ内リンクをするっと移動させるスムーススクロールのメモ。

【jQuery】ページ内リンクをスムーススクロールでするする移動させる

縦に長いLPやトップページでページ内リンクをするするっとスクロールさせたいときのjQueryです。

リンクをクリックすると該当の箇所にするするっとスクロールされます▼

See the Pen Smooth scroll by nkmr (@nkmr_whoo) on CodePen.

jQuery部分をざっと説明すると、『#』が付与されたアンカーリンクをクリックすると、該当のidが振られた箇所にスムーススクロールします。

スムーススクロールが停止する部分の調整のため、構文の冒頭でPCとSPの位置調整の数値を定義しておき、それらをif文の条件でwindow幅に応じて処理を分けています。

PCだとちょうどいい箇所でスクロール止めたつもりがSPだと大きくずれている、なんてこともあるので、ウィンドウ幅で止まる位置を調整してあげます。

▲ではPCとSPのみの調整ですが、必要に応じてタブレット用も追記してあげるとよいでしょう。