クリックしたとき同じページ中をスクロールして移動させたい。
スクロールする位置や速度も調整できるといいな。
ページ内の指定した場所に移動するページ内リンク。
このページ内リンクを実装する方法を紹介します。
もくじ
スムーススクロールで同一ページ内の移動をゆっくり（ふわっと）する方法
まずは結論。ソースコードはこちらです。
jQueryを使用するのでjQueryの読み込みも忘れずに実施してください。
$('a[href^="#"]').click(function () {
const adjust = 50; //基準からのシフト量
const speed = 600; //速度
let href = $(this).attr("href");
let target = $(href == "#" || href == "" ? "html" : href);
let position = target.offset().top - adjust; //マイナスで下にずれる
$("body,html").animate({ scrollTop: position }, speed, "swing");
return false;
});簡単なソースコード解説
スクロール時のシフト量と速度はそれぞれadjustとspeedで調整可能です。
特にadjustでのシフト量の調整は固定ヘッダーなどで要素が隠れてしまう時などに調整できるので便利です。
まとめ
スムーススクロールの実現の仕方を解説しました。
