定番
新着
履歴

jQuery スムーズスクロール

jQuery スムーズスクロール

jQueryを使ってページ内を上下にスムーズにスクロールさせるボタンを設置します。

こちらのボタンをクリックしてください。

真ん中までスクロール↓ 一番下までスクロール↓↓

一般的に上から下へスクロールさせる操作は、ページ内リンクと呼ばれ、#をつけたIDを指定してリンクを貼るだけですが、見てる人にはページ内に飛んだのかがわかりにくいため、この表現がよく使われます。HTMLもそのままでスムーズな演出ができるのが使いやすいところでもあります。

まず、以下のJavaScriptを書きます。


 $.fn.smoothscroll = function(option) {
    var settings = $.extend({
      speed: 1000
    }, option);

    $(this).click(function() {
      $('html, body').animate({
        scrollTop: $(this.getAttribute('href')).length ? $(this.getAttribute('href')).offset().top : 0
      }, settings.speed);

      return false;
    });

    return this;
  };

jQueryのデフォルトの関数を使ってスクロールの位置を、アニメーションで指定しています。speedの値を変えれば、移動完了までの速度が変わります。

一番上までスクロール 一番下までスクロール

htmlはこのような感じです。

<div id="middle"></div>
<a class="demo_btn" href="#top">一番上までスクロール</a>
<a class="demo_btn" href="#bottom">一番下までスクロール</a>

スクロールさせたい場所にIDを振っておき、#IDでリンクをつけるだけです。

上記のJSの後に、実行する記述は以下になります。

$(document).ready(function() {
	$('a[href^="#"]').smoothscroll({
		speed: 1000 //1秒で移動
	});
});

aタグからID情報をとってスクロールする仕掛けです。ここで速度変更も可能です。

ちなみに下から上にスクロールする際は、よく縦に長いサイトやスマートフォンのページでよく見かけるUIでだいたい同様のjQueryが実装されています。

真ん中までスクロール↑ 一番上までスクロール↑↑
2017-08-26 23:34:19
このページの二次元コード

関連するサンプル

人気記事ランキング

© 2018 kipure
Top