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