jQueryでページの先頭にジャンプする機能を作る
jQueryでページ先頭にジャンプ
jQueryを使用すると簡単にジャンプの機能が実現できます。
- ページ先頭に戻るための仕様を以下のように決めます。
- 最初は上に戻る矢印は消しておく。
- ある程度スクロールしたら上に戻るための矢印を表示する。
- 矢印をクリックしたら一気に戻らないでスクロールしながら上に戻る。
- 上に戻ったら矢印を消す。
HTML、CSS、jQueryのソース
<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>jQueryで先頭にジャンプ</title>
<style>
body {
text-align: center;
}
#back-to-top {
position: fixed;
right: 5px;
bottom: 20px;
}
#pos {
position: fixed;
right: 5px;
bottom: 5px;
}
</style>
<script src="../js/jquery-2.2.4.min.js"></script>
</head>
<body>
<h1>jQueryでページ先頭にジャンプさせる</h1>
<p>先頭にジャンプ</p>
<p>先頭にジャンプ</p>
<p>先頭にジャンプ</p>
<p>先頭にジャンプ</p>
<p>先頭にジャンプ</p>
<p>先頭にジャンプ</p>
<p>先頭にジャンプ</p>
<p>先頭にジャンプ</p>
<p>先頭にジャンプ</p>
<p>先頭にジャンプ</p>
<p>先頭にジャンプ</p>
<p>先頭にジャンプ</p>
<p>先頭にジャンプ</p>
<p>先頭にジャンプ</p>
<p>先頭にジャンプ</p>
<p>先頭にジャンプ</p>
<p>先頭にジャンプ</p>
<p>先頭にジャンプ</p>
<p>先頭にジャンプ</p>
<p>先頭にジャンプ</p>
<p>先頭にジャンプ</p>
<p>先頭にジャンプ</p>
<p>先頭にジャンプ</p>
<p>先頭にジャンプ</p>
<p>先頭にジャンプ</p>
<p>先頭にジャンプ</p>
<p>先頭にジャンプ</p>
<div id="back-to-top"><a href="#"><img src="arrow_up100.png"></a></div>
<div id="pos"></div>
<script>
$(function(){
// 上に戻る矢印(#back-to-top)は消しておく
$('#back-to-top').hide();
//スクロールが100を超えたら上矢印を表示、トップに戻ったら消す
$(window).scroll(function(){
$('#pos').text($(this).scrollTop()); //スクロール位置を表示
if( $(this).scrollTop() > 100 ) {
$('#back-to-top').fadeIn(); //上矢印を表示
} else {
$('#back-to-top').fadeOut(); //上矢印を消す
}
});
//上矢印(#back-to-top)がクリックされたら上に戻る
$('#back-to-top a').on('click',function(){
$('body').animate({
scrollTop: 0 //トップへ
},500); //0.5秒かけて戻る
return false;
});
});
</script>
</body>
</html>
テストの結果を確認
最初は非表示の矢印ボタンは101以上スクロールしたら表示されました。クリックしたらトップに戻りボタンが消えることを確認しました。