ページ内リンクをするっと移動させるスムーススクロールのメモ。
【jQuery】ページ内リンクをスムーススクロールでするする移動させる
縦に長いLPやトップページでページ内リンクをするするっとスクロールさせたいときのjQueryです。
リンクをクリックすると該当の箇所にするするっとスクロールされます▼
See the Pen Smooth scroll by nkmr (@nkmr_whoo) on CodePen.
jQuery部分をざっと説明すると、『#』が付与されたアンカーリンクをクリックすると、該当のidが振られた箇所にスムーススクロールします。
スムーススクロールが停止する部分の調整のため、構文の冒頭でPCとSPの位置調整の数値を定義しておき、それらをif文の条件でwindow幅に応じて処理を分けています。
PCだとちょうどいい箇所でスクロール止めたつもりがSPだと大きくずれている、なんてこともあるので、ウィンドウ幅で止まる位置を調整してあげます。
▲ではPCとSPのみの調整ですが、必要に応じてタブレット用も追記してあげるとよいでしょう。
