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

 

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

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

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

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

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

HTML

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

jQuery

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

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

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

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

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

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

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

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

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

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

サンプル

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

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


Welcome to UX MILK

UX MILKはより良いサービスやプロダクトを作りたい人のためのメディアです。

このサイトについて

UX MILKのディレクター募集