jQueryでページトップへ戻るボタンを簡単に作る方法【HTML/CSS】
WEB制作におけるメモシリーズ。
ページトップボタンの実装
まず、こんな感じの簡単なボタンを画面右下に配置。
HTML
<div class="scroll-top" id="top-bottun">
<p>ページトップ</p>
</div>divで囲っておくのは癖みたいなもんです。
お好みでどうぞ。
CSS
.scroll-top{
position: fixed;
bottom: 20px;
right: 20px;
background: #666;
color: #FFF;
width: 100px;
text-align: center;
cursor: pointer;
z-index: 2;
}ボタンの構造は本当に好みなので適当でいいです。
jQuery
$('top-bottun').hide();
$(window).scroll(function(){
if($(this).scrollTop() > 100) {
$('top-bottun').fadeIn();
}
else{
$('top-bottun').fadeOut();
}
});
$('top-bottun').on('click', function(){
$('html, body').animate({scrollTop: 0 }, 500);
});最初の1行目でボタンを隠しておきます。
3行目の塊で
100px分下にスクロールするとボタンがフェードインし、
100pxより上に行くとボタンがフェードアウトします。
12行目の塊でページトップに戻る処理がされています。