今回は、jQueryを使ってページをスクロールする方法を紹介します。
よく、WEBページを見ていると「TOPへ戻る」のリンクがあり、クリックするとスクロールしてTOPへ戻る事があります。
HTMLだけでもページ内リンクを使うことでページをスクロールすることはできますが、jQueryを使うことでスムーズなスクロールを実現することができます。
animate()を使ったスムーズなスクロール
今回使うのは、アニメーション効果を作成するanimate()です。リンクがクリックされた時に、移動先となる要素の位置を取得し、animate()のscrollTopプロパティを使うことでスムーズなスクロールを実現します。
HTML
まずは、HTMLは通常のページ内リンクと同じように、以下のようなリンクを作成します。今回は、ID属性targetを持つ要素の位置までスクロールします。
|
1 |
<a href='#target'>Topへ戻る</a> |
jQuery
以下が、今回実装するjQueryです。aタグのhref属性が「#」から始まるリンクがクリックされた時のみイベントが発動します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
// ページ内リンクのみ取得します。 $('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上にスクロールするサンプルです。
|
1 |
var targetY = target.offset().top - 50; |
また、animate()の第二引数の数値は、アニメーションが完了する時間を指定するものなので、この数値を大きくすればよりゆっくりとスクロールし、小さくすればより早くスクロールします。
以下のように、500から1000に値を変更するとスクロールが２倍遅くなります。
|
1 |
$('body').animate({scrollTop: targetY}, 1000, 'swing'); |
また、数値以外にもslow、fastなどの値も指定できます。
サンプル
以下の「Topへ戻る」リンクをクリックすると、この記事の一番上までスクロールします。
今回はaタグのクリックでイベントを発生させましたが、animate()を使えば好きなタイミングでスクロールを実行することができます。
