jQuery で ページトップ に戻る処理
昨日は画面作りで久々に１日 HTML・CSS・jQuery を触ってました。
今回はjQueryのちょいネタを書きます。
・jQuery で ページトップ に戻る処理
html
<div id="go_top">TOP</div>
ボタン部分に相当する部分を<div>でつくります。位置はCSSで指定するので<body>の中ならどこに書いても構いません。
#go_top{
position: fixed;
bottom:10px;
right:10px;
width:50px;
height:50px;
line-height:50px;
text-align:center;
background-color: #666666;
cursor:pointer;
}
右下に固定で表示されるようにしています。位置の指定に関する記述は position: fixed; bottom:10px; right:10px; の3行です。それ以外は見た目に関する記述ですが、例なのでここではあえてシンプルなものを指定しています。
$(function(){
$("#go_top").click(function () {
$('html,body').animate({ scrollTop: 0 }, 'fast');
return false;
});
});
記述はたったこれだけ。ボタン部分(<div id="go_top">)がクリックされると<body>タブのスクロールトップを0にまで戻します。animate()の第2引数を変えることでスクロールスピードを変えられます。'fast'、'slow' の他数値でミリ秒を指定できます。
