jQueryでページ内スクロールの速度・位置をカスタマイズする

 

今回は、jQueryを使ってページをスクロールする方法を紹介します。

よく、WEBページを見ていると「TOPへ戻る」のリンクがあり、クリックするとスクロールしてTOPへ戻る事があります。

HTMLだけでもページ内リンクを使うことでページをスクロールすることはできますが、jQueryを使うことでスムーズなスクロールを実現することができます。

animate()を使ったスムーズなスクロール

今回使うのは、アニメーション効果を作成するanimate()です。リンクがクリックされた時に、移動先となる要素の位置を取得し、animate()のscrollTopプロパティを使うことでスムーズなスクロールを実現します。

HTML

まずは、HTMLは通常のページ内リンクと同じように、以下のようなリンクを作成します。今回は、ID属性targetを持つ要素の位置までスクロールします。

<a href='#target'>Topへ戻る</a>

jQuery

以下が、今回実装するjQueryです。aタグのhref属性が「#」から始まるリンクがクリックされた時のみイベントが発動します。

// ページ内リンクのみ取得します。
$('a[href^=#]').click(function(){
    //デフォルトのイベントをキャンセル
    event.preventDefault();

    // 移動先となる要素を取得します。
    var target = $(this.hash);
    if (!target.length) return;

    // 移動先の位置を取得します
    var targetY = target.offset().top;

    // animateで移動します
    $('body').animate({scrollTop: targetY}, 500, 'swing');
});

まず、event.preventDefault();で、デフォルトのイベントをキャンセルします。

次に、ターゲットとなる要素の縦の位置を、target.offset().top;で取得して、変数targetYに入れます。

そして、animate()でスクロールをします。

スクロールの位置・速さなどを調整する

もし、スクロールの位置を変えたい場合は、ターゲット要素の位置(offcet)を調整することが変更できます。

以下はターゲット要素より、50px上にスクロールするサンプルです。

var targetY = target.offset().top - 50;

また、animate()の第二引数の数値は、アニメーションが完了する時間を指定するものなので、この数値を大きくすればよりゆっくりとスクロールし、小さくすればより早くスクロールします。

以下のように、500から1000に値を変更するとスクロールが2倍遅くなります。

$('body').animate({scrollTop: targetY}, 1000, 'swing');

また、数値以外にもslow、fastなどの値も指定できます。

サンプル

以下の「Topへ戻る」リンクをクリックすると、この記事の一番上までスクロールします。

今回はaタグのクリックでイベントを発生させましたが、animate()を使えば好きなタイミングでスクロールを実行することができます。


イベント