jQuery の animate で任意の位置にスムーススクロールする

jQuery の 「animate メソッド」を使って画面を滑らかにスクロールさせて任意の位置に移動する方法のまとめです。

この機能が使えるとトップページのメニューから任意の位置に一気に画面遷移することができ、ユーザーエクスペリエンスも向上するはずです！

jQueryでスムーススクロールのカスタマイズ手順

カスタマイズ手順は以下の通り。

script.js にコードをコピペ

JavaScriptの script.js ファイルに次のコードを貼り付けます。

$(function(){
  $('a[href^="#"]').click(function(){
    var speed = 700;
    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;
  });
});

• speed：ページの移動にかける秒数
• position：取得した位置（数字）
• animate：jQuery の関数

参考：jQueryでスムーススクロールを実装する方法【初心者向け】

HTML

以下のHTMLをクリックすると任意の位置に移動します♩

<ul>
<li><a href="#container">トップへ移動</a></li>
<li><a href="#1">見出し1に移動</a></li>
<li><a href="#2">見出し2に移動</a></li>
<li><a href="#3">見出し3に移動</a></li>
</ul>

移動先は href に移動先のIDを指定します。

実装したコードの使い勝手を下の見出しをクリックすることで体験できます。

具体例

• トップへ移動
• 見出し1に移動
• 見出し2に移動
• 見出し3に移動

見出し1

見出し2

見出し3