クリックしたときにページ内TOP、ページ最下部へジャンプ（スムーズスクロール）させる方法【jQuery】
ウェブページ内で、クリックして特定の場所にジャンプさせたい時がしばしばあります。
今回はjQueryを使ってページ内TOP、ページ内最下部へジャンプさせてみます。さらに、スムーズスクロールを考慮して、今回はDEMOを作ってみました。
Index
ページ内TOPへ戻るボタン
まずは、よく見かけるページ内TOPへ戻るボタンを作ってみます。
サンプルで動作を確認
DEMO1サンプルで動作を確認してください。
右下にTOPへ戻るボタンがあるので、画面をスクロールして、TOPへ戻るボタンをクリックするとページTOPへスクロールします。
htmlでコーディング
<div class="scroll_button">
<a id="demo_scroll_top" href="#">ページTOPへ戻る</a>
</div>TOPへ戻るボタンをhtmlでコーディングします。ボタンだけなのでシンプルです。
CSSでコーディング
#pagejump_demo .scroll_button a{
position: fixed;
display: block;
right:50px;
bottom:50px;
background: #313131;
color:#fff;
padding:20px;
}position:fixedで右下にボタンを固定します。
jQueryで動きをつける
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>jQueryを読み込みます。
$(function(){
$("a#demo_scroll_top[href^=#]").click(function(){
var speed = 1200;
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^=#]”).click()でaタグでフラグメント識別子（#id名）が設定されているものをクリックした時にスムーズスクロールを行うようにします。
スムーズスクロールするために必要な変数を定義します。
| 変数 | 詳細 |
|---|---|
| speed |
スクロール開始から終わりまでの時間を設定します。 slow、normal、fastといった文字列で指定可能です。 また、ミリ秒単位で指定することも可能です。 |
| href | .attr(“href”)でクリックしたaタグのhrefで指定されている値を取得します。 |
| target |
上記のhrefに格納した値を条件式で判別して、hrefの値が#もしくは空だった場合に、htmlという文字列（つまりhtmlの開始タグの位置）をtargetに格納し、それ以外の時はそのままhref の値をtargetに格納します。 |
| position |
targetに格納した位置から、.offset().topでdocumentの上端からの距離を求めます。 positionがスクロールの終点になります。 |
スクロールのスピード、スクロール終点位置が求められたので、
.animate()を使って、スムーズスクロールを実現します。ちなみに、ここで指定している”swing”という値は加速・減速を加えるための関数easingの一種で、通常はlinearとswingの2種類が指定可能です（※プラグインを入れればより多くのeasingを指定できます）。
ちなみにここでreturn:falseを設定しているのは、urlに#を表示させないようにするため（リンク先に移動しないようにするため）です。
ページ内最下部へボタン
サンプルで動作を確認
DEMO2サンプルで動作を確認してください。
右上にあるページ下へボタンをクリックするとページ最下部へスクロールします。
htmlでコーディング
<div class="scroll_button_btm">
<a href="#page-bottom">ページの一番下へ</a>
</div>ページの一番下へボタンをhtmlでコーディングします。
CSSでコーディング
#pagejump_demo .scroll_button_btm a{
position: fixed;
display: block;
right:50px;
top:50px;
background: #313131;
color:#fff;
padding:20px;
}position: fixedで右上にボタンを固定します。
jQueryで動きをつける
$(function(){
$("a[href^=#page-bottom]").click(function(){
$('html, body').animate({
scrollTop: $(document).height()
},1500);
return false;
});
});$(“a[href^=#page-bottom]”).click()でaタグでhrefの値が#page-bottomものをクリックした時にスムーズスクロールを行うようにします。
TOPに戻るボタンを作るときと同じように、.animate()を使って、スムーズスクロールを実現します。
$(document).height()でページ全体のの高さを求めてscrollTopで指定します。そうすることでページの最下部へジャンプさせることが可能になります。
まとめ
いかがでしたか？
短いコードでTOP、最下部へのスムーズスクロールが実現できました。
ページ最下部へジャンプするボタンは、例えばページがとても縦長でページ最下部にだけページネーションを置いている場合や、ランディングページなどで申込フォームがページ最下部にある場合などで使えるかと思います。