スポンサーリンク

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

JavaScript
スポンサーリンク

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

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

スポンサーリンク

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

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

  • STEP01

    JavaScriptのコピペ
    script.js にコードをコピペ
  • STEP02

    HTMLのコピペ
    HTMLをコピペ

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

コメント

タイトルとURLをコピーしました