jQueryを使えば、サイト内のささいなアクションが、ごくわずかなコードで簡単にアニメーション化されます。

今回は、アンカーリンクによって、ブラウザがページの別の要素にジャンプしたときの動作にスムーズなスクロールを実装するカスタマイズ方法についてご説明します。

動作デモはこちら。
→https://codepen.io/taka0922/pen/MpaYGO

通常、内部リンクを使用してページの異なる部分にジャンプさせるためには、下記のようにアンカータグの＃と要素IDを使用します。

1
2
3
<a href="#target">START</a>
 
<div id="target">GOAL</div>

これによって、STARTからGOALにページ内ジャンプをさせることができます。
しかし実際このようなアンカーリンクによるジャンプは、ユーザーにとって味気ない上に、2つの要素の位置関係がいまいちよく分からないというデメリットがあります。

そのため、このような2つの要素移動に、実際に訪問者がページ内をスムーズに移動しているようなアクションを与えることで、ユーザーにページ構造を視覚的に分かりやすく伝えることが可能となります。

その導入は非常に簡単で、下記のコードを<head>内に挿入するだけです。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!-- jQuery.jsの読み込み -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
 
<!-- スムーズスクロール部分の記述 -->
<script>
$(document).ready(function(){
    $('a[href^="#"]').on('click',function (e) {
        e.preventDefault();
 
        var target = this.hash;
        var $target = $(target);
 
        $('html, body').stop().animate({
            'scrollTop': $target.offset().top
        }, 2000, 'swing', function () {
        window.location.hash = target;
        });
    });
});
</script>

これで＃で始まるすべてのリンクにターゲットへのアニメーションスクロールが適用されます。
また2000という数字を、さらに大きくすればスクロールスピードは遅くなり、小さくすればスピード速くなります。

また上記のコードでクリックイベントにより、URLが変更されることに気づくかと思います。
このときクリックイベントのURLからこれを削除したい場合は、上記コードのスクロール時にハッシュタグを追加しているコールバック関数を削除します。

1
window.location.hash = target;

＜スクロールに関する記事3選＞
・ウィジェットでスクロールメッセージを表示できるプラグイン「Horizontal scrolling announcement」
・スクロールで上に戻るボタンが簡単に追加できるプラグイン「Scroll Back to Top」
・[WP]無限スクロール設定ができるプラグイン「Infinite Scroll」