解 説
javascript とcssを使ってページ内スクロールボタンの作り方をご紹介します。ここでは使用頻度が高いと思われる「ページのトップ [ 最上段 ]へ戻るボタン」を作ります。ある程度スクロールした時点で、戻るボタンを画面右下にフェード表示させる場合を想定しています。
1まずはhtmlとcssでボタンを配置します
/* 全ページ共通で使用したい場合には「footerテンプレート」などに組み込んでも良いでしょう*//* cssはこんな感じで画面右下に固定配置します */ #for_top { position: fixed; bottom: 0px; right: 40px; z-index: 10; }
2javascriptでスクロールの動きを実装します。
$(function(){
// ボタンの要素を指定します。ここでは「#for_top a」を指定
var $btn = $('#for_top a');
var isHidden = true;
// デフォルトは非表示
$btn.hide();
$(window).scroll(function () {
// 240pxスクロールした時点でフェードイン表示する
if( $(this).scrollTop() > 240 ) {
if( isHidden ) {
$btn.stop(true,true).fadeIn(200);
isHidden = false;
}
} else {
//最上段から240pxの位置に戻るとフェードアウトで消える
if( !isHidden ) {
$btn.stop(true,true).fadeOut();
isHidden = true;
}
}
});
// クリックイベントの登録
$btn.click(function(){
// ページトップへスクロール
$('html, body').animate({
'scrollTop': 0
// 1/1000秒でスピード調整
}, 300);
// デフォルトイベントのキャンセル
return false;
});
});
3もっと単純なケース「指定位置までスクロールさせるボタン」をつくる場合
$(function(){
//ボタンになる要素を指定
var $btn = $('#for_top');
// クリックイベントの登録
$btn.click(function(){
// ページトップへスクロール 300はスピード調整（1/1000秒）
$('html, body').animate({'scrollTop': 0}, 300);
// イベントのキャンセル
return false;
});
});
押すと指定位置までスクロールするボタンです。とっても簡単ですね。
jQueryの「smoothscroll.js」なども有名ですが、このくらいのjsならば、head内に書いてしまっても良いと思います。縦に長くなりがちなスマートフォンレイアウトにも効果的なスクリプトです。とにかくお手軽に使い回したいですね。