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が実装されています。
真ん中までスクロール↑ 一番上までスクロール↑↑
