こんにちは、@Manabu です。
ブログの動作を確認していたら、ページ内リンクでの動作が何も設定されていないことに気づきました。
デザインも含め、少しずつ良いものに仕上げていこうと考えているので、今回はページ内リンクをクリックした時に、滑らかにスクロール（スムーズスクロール）させる方法について対応しました。
この記事は、以下のような方におすすめです。
貼り付けるだけで実装可能なので、ぜひ参考にしてください！
スムーズスクロールとは？
スムーズスクロールとは、Webページ内のリンクやボタンをクリックしたときに、目的の位置まで滑らかにスクロールするユーザーインターフェースの動作です。
これにより、ユーザーがページ内を移動する際に自然で直感的な体験を提供できます。
スムーズスクロールを実装する利点は、以下のような事象が考えられます。
1. ユーザーエクスペリエンスの向上
ページ内リンクをクリックしたときに、ページが突然ジャンプするのではなく、滑らかに移動することで、ユーザーは現在地から目的地までの移動を視覚的に追跡できます。
これにより、サイトの使い勝手が向上します。
2. 視覚的なつながり
ページの異なるセクション間をスムーズに移動することで、視覚的なつながりが生まれ、ページ全体の一体感が高まります。
ユーザーは自分がどこにいるのかを理解しやすくなります。
3. アクセシビリティの向上
スムーズスクロールは、特に長いページで有効です。
ユーザーがナビゲーションバーや目次を利用して特定のセクションに移動する際に、スクロールの動きを追いやすくなり、目的のセクションに確実にたどり着けるようになります。
実装方法
私が実装した方法は、jQueryを使用しています。
WebサイトのJavaScriptファイルに、以下のコードを書き込むことで実装することができます。
$(function() {
$('a[href^="#"]').on('click', function(e) {
e.preventDefault();
var offsetY = 150; // オフセット（ピクセル）
var target = $(this.hash);
if (target.length) {
var targetPosition = target.offset().top - offsetY;
var currentPosition = $(window).scrollTop();
var distance = Math.abs(currentPosition - targetPosition);
var baseSpeed = 300; // 基本速度（ミリ秒）
var speedFactor = 0.25; // 距離に応じた速度係数
var speed = baseSpeed + (distance * speedFactor);
$('html, body').animate({
scrollTop: targetPosition
}, speed, 'swing'); // 'swing'を使用して滑らかなスクロール
}
});
});数値を変更することで、カスタマイズすることができます。
offsetY：スクロール位置を調整できます。固定のナビゲーションバーなどがあるときに調整してください。
baseSpeed：スクロールの基本速度をミリ秒単位で指定できます。スクロールの速度を早めたい場合は数値を小さくし、遅め対場合は大きくしてください。
speedFactor：スクロース距離に応じた速度の係数です。スクロールする距離が遠い場合、速度だけ指定するとすごく早く移動します。この係数を指定することで、移動距離が長くても滑らかに移動するように対応できます。時間をかけて移動させたい場合は、数値を大きくしてください。
全体的に、同じようなスクロールの速度で移動してほしいと思い、このような処理になっています。
同じ時間で移動したい場合は、係数の処理は外すようにしてください。
まとめ
今回は、ページ内リンクでスムーズスクロールを実装する方法について紹介しました。
少しの変化ですが、使いやすいサイトを目指す場合に有効な方法だと思います。