【jQuery】スムーズスクロールを実装&徹底解説

Topに戻るボタンをクリックしたり、目次をクリックした時にページ内の目的の場所までスクロールさせたい時は多々ありますね。そんな時、パッと瞬間移動するのではなく、スルスルっと気持ちよく移動させた方がより見やすく訪問者に優しいサイトになります。

この動きをスムーズスクロールと言います。今回はスムーズスクロールをjQueryを使って簡単に実装する方法をお伝えしますので、是非サイト作りに役立てて下さい。

DEMOはこちら

トップへ

まとめへ

※「トップへ」をクリックするとこのページの一番上へ、「まとめへ」をクリックするとこのページのまとめに移動します

スムーズスクロールの実装方法

以下のHTMLとjQueryを用意します。

HTML

<body>
  <div><a href="#">トップへ</a></div>
  <div><a href="#matome">まとめへ</a></div>
</body>

jQuery

$(function(){
  $('a[href^='#']').on('click', function() {
    var href= $(this).attr('href');
    var target = $(href == '#' || href == '' ? 'html' : href);
    var position = target.offset().top;
    $('html, body').animate({scrollTop:position}, 500, 'swing');
    return false;
  });
});

jQueryの詳細

ではここからはjQueryの内容を1行ずつ説明していきます。

2行目

「属性がhrefで値が#で始まるaタグをクリックしたら以下の処理を実行する」という指定になります。

jQuery

$('a[href^=#]').on('click', function() {
  //　ここに処理内容を記述
});

3行目

変数hrefを作り、そこにクリックしたaタグのhrefの値（リンク先）を取得して代入します。

.attr()メソッドを使い、hrefの値を取得しています。

jQuery

var href= $(this).attr('href');

4行目

3行目で取得したhrefの値が、'#'または''ならば、ページトップを。

そうでなければ取得したhrefの値のidがある要素をスクロール先として、変数targetに代入します。

jQuery

var target = $(href == '#' || href == '' ? 'html' : href);

5行目

4行目でわかったスクロール先を数値として取得して、変数positionに代入します。

.offset().topでスクロール先のtopの位置を取得しています。

jQuery

var position = target.offset().top;

6行目

animateメソッドの{scrollTop:position}で、5行目で取得した場所までスクロールするという指定をしています。

500はスクロールの速さの指定で、今回の場合は500ミリ秒となります。

swingは動き方を指定しています。swingは「最初はゆっくり、途中は速め、最後はゆっくり」と動きます。

jQuery

$('html, body').animate({scrollTop:position}, 500, 'swing');

7行目

return false;なしでも問題はないのですが、このままだとスクロール後にURLにアンカーリンクが付加されます。

http://sample.com
↓
http://sample.com/#second

そうならないように以下を記述します。

jQuery

return false;

まとめ

いじることなく、このままコピペして使っても問題なく、スムーススクロールが実装されますので、是非ご自身のサイトやブログなどで使ってみてください。

jQuery関係の記事は他にも書いているので、宜しければそちらもチェックしてみてください。

: 【jQuery】フォーム内でパスワードの表示/非表示を切り替える

アイコンをクリックすると、パスワードの表示と非表示を切り替える表現が当たり前の様に使われていますが、今回はそれを簡単にjQueryで実装する方法をお伝えしたいと思います。 DEMOはこちら ※数字を入 ...

続きを見る

: 【jQuery】タブ切り替えを実装【複数設置対応】

サイトにタブメニューを表示する機会があると思いますが、場合によってはページ内で複数箇所に設置したい時もあるのではないでしょうか。今回は複数設置に対応したタブの切り替えをjQueryを使って実装する方 ...

続きを見る

: 【jQuery】モーダルウィンドウをプラグインなしで作る【複数設置対応】

キャンセルボタンを押すまで表示されるモーダルウィンドウは、サイト作りに必須というほどでもないですけど、よく使われますよね。今回は複数設置に対応したモーダルウィンドウをjQueryを使って実装する方法 ...

続きを見る

: 【jQuery】スムーズスクロールを実装&徹底解説

Topに戻るボタンをクリックしたり、目次をクリックした時にページ内の目的の場所までスクロールさせたい時は多々ありますね。そんな時、パッと瞬間移動するのではなく、スルスルっと気持ちよく移動させた方がより ...

続きを見る

: 【jQuery】アコーディオンメニューの簡単作成方法【たった3分で出来る】

アコーディオンメニューって聞いたことがありますか？使いやすさをデザインする「UIデザイン」における表現方法のひとつで、コンテンツを開いたり閉じたりするのを、クリックで切り替えることで、ユーザーが欲しい ...

続きを見る

: 【jQuery】フィルタリング機能を実装【カテゴリごとのグループ分けに便利】

ギャラリーページなどで、カテゴリごとに絞り込みをしたいという場合があると思いますが、今回はjQueryで簡単に絞り込み機能を作ってみます。ユーザービリティが確実に向上しますので、是非覚えておいてくだ ...

続きを見る

: 【jQuery】アラートでページ離脱防止をしよう

せっかくサイトに訪問してくれた人が、フォーム入力の際にページ離脱してしまうと、サイト運営側としては困りますよね。そこで今回は、アラートを使ってページ離脱を防ぐ方法をお伝えします（PCでこの記事を読ん ...

続きを見る