NOTE

ページ内リンクをゆっくり移動するスムーススクロールを設置する方法(最新jQuery対応)

2021/3/6

2021/3/12

611 view

  ページ内リンクをゆっくり移動するスムーススクロールを設置する方法(最新jQuery対応)

ゆっくり移動するあれ

サイト内のリンクをゆっくりと移動するスムーススクロール
おしゃれな動きを演出できるだけでなく、ユーザーにとっても移動先が分かりやすくなるというメリットもあります。
今回は、このスムーススクロールを実装する方法を解説します。
このサイトの「目次」で動作確認ができます。

スムーススクロールを実装する方法

1. jQueryを読み込むさせる

スムーススクロールには、jQueryが必要です。
サイトに読み込んでいない場合は、下記コードを記述してjQueryを読み込ませます。

<script src="js/jquery-3.5.1.min.js"></script>

2. scriptを記述する

下記のスクリプトを<head>か<footer>の中に記述します。

<script type="text/javascript">
$(function(){
  $('a[href^="#"]').click(function(){
    var speed = 500;//スクロールスピード
    var href= $(this).attr("href");
    var target = $(href == "#" || href == "" ? 'html' : href);
    var position = target.offset().top;
    //スムーススクロール
    $("html, body").animate({scrollTop:position}, speed, "swing");
    return false;
  });
});
</script>

応用編)移動位置をずらす

固定ヘッダーにしているサイトではヘッダーの高さ部分をずらして移動させたいこともあります。
その場合は下記のように記述ください。
var adjustの数値を実際に合わせてください。

<script type="text/javascript">
$(function(){
  $('a[href^="#"]').click(function(){
    var speed = 500;//スクロールスピード
    var href= $(this).attr("href");
    var target = $(href == "#" || href == "" ? 'html' : href);
    var adjust = -100;// 移動先を100px上にずらす
    var position = target.offset().top + adjust;
    //スムーススクロール
    $("html, body").animate({scrollTop:position}, speed, "swing");
    return false;
  });
});
</script>

最新のjQueryに対応しています

スムーススクロールの参考サイトはいくつかありますが、中には過去のjQueryに合わせたものがあり最新のjQueryに対応していない場合があります。
その場合は最新のjQueryではスムーススクロールが効かないです。
今回紹介している方法は現状のjquery-3.5.1では確認しています。

まとめ

以上、ページ内リンクをゆっくり移動するスムーススクロールを設置する方法の解説でした。
ご質問などあればお気軽にコメントください。

この記事へのコメント

  • まだ書き込みはありません

コメントを残す



関連記事

ページの先頭に戻る