By U Zensen.

欲しいものはプログラミングで自分で作る。

プラグイン不要!! jQueryのみで実装するスムーズなスクロール!!

2015 / 6 / 28 2016 / 10 / 31
jQuery
1437923090203657-compressor

はじめに!!

どうも!ぴーすけと申します!!

最近のWEBサイトでは当然のように実装されている機能として、スムーズなスクロール機能がありますよね。

このサイトでもページを下の方にスクロールすると画面下に「TOP」ボタンが表示され、そのボタンを押すと画面最上部へスムーズにスクロールされるようになっています。(PCのみ)

実装するには、jQueryのプラグイン「smoothScroll.js」などが有名ですが、今回は余計プラグインなどは使用せずに、jQueryだけで実装する方法をご紹介します!!

スポンサードリンク

なめらかなスクロール!!

まず、単純に画面最上部へスクロールするようにするためには、以下のように記述するのが一番簡単な実装方法だと思います。

もちろんプラグインは不要で、jQueryだけ読み込める状態なら動作します。

まずはボタンを用意します。デザインは適宜調整してください。私の場合はfixedで画面下に固定して配置しています。

html

<div class="top_move">TOP</div>

そしたら、以下のように用意したボタンをクリックすると動作するようにします。

jQuery

$(function() { $(".top_move").on('click touchstart', function () { $('html,body').animate({ scrollTop: 0 }, 'swing'); return false; }); });
$(“.top_move”).on(‘click touchstart’, function () {

上記の記述は、「top_move」クラスが指定されているタグを「クリックもしくは、タッチ」すると処理が動きだすという記述です。
$(‘html,body’).animate({ scrollTop: 0 }, ‘swing’);

上記の記述は、画面全体を対象にanimateが動くように設定し、scroopTopが0になるまで’swing’させる。という記述になっています。 swingは最初はゆっくり動いて、徐々に早くなるという動き方の指定です。

これで完了です!簡単ですね!

目次みたいに遷移先を複数用意する場合!!

ページ内にいくつかスライドの遷移先を用意して、スライドを行う際に便利な記述方法としては以下の通りです。

html

<!-- スムーズスクロールボタン --> <a href="#scroll_1">scroll_1へスクロール</a> <a href="#scroll_2">scroll_2へスクロール</a> <!-- スクロール先 --> <div id="scroll_1">#scroll_1はここです</div> <div id="scroll_2">#scroll_2はここです</div>

jQuery

$(function(){ // #で始まるアンカーをクリックした場合に処理 $('a[href^=#]').click(function() { // スクロールの速度 var speed = 400; // ミリ秒     // 移動先を取得 var href= $(this).attr("href"); var target = $(href == "#" || href == "" ? 'html' : href); // 移動先を数値で取得 var position = target.offset().top; // スムーススクロール $('body,html').animate({scrollTop:position}, speed, 'swing'); return false; }); });

上記の処理を記述していることにより、a href=”#scroll_1″のように「#」から始まるhrefを指定したアンカーを用意し、その遷移先のIDを用意しておくことで、その遷移先に移動する用になります。詳しくはDEMOページで紹介しておきます。

DEMO

上記のDEMO画面で右クリックをして「ソースを見る」をしてみてください。参考になると思います。

まとめ

jQueryを使えば簡単にスムーススクロールを実装できる!!

Pocket

コメント

コメントを残す