ある程度スクロールすると画面右下に出現し、クリックすると瞬時にページ先頭へ戻るボタンの作り方です。
DEMO
HTML
<div id="container"> <header id="header"> header </header> <div id="content"> contents </div> <footer id="footer"> footer <div id="backtotop"> <a href="#header">TOP</a> </div> </footer> </div>ヘッダーから始まり、続くコンテンツ、フッターがコンテナで囲まれているマークアップです。
フッターの子要素にボタンがあり、このボタンをjQueryで操作します。
CSS
* { font-family: 'Raleway', sans-serif; font-size: 30px; text-align: center; } #container { width: 500px; margin: 0 auto; } #header { background-color: #A18E5C; color: #fff; width: 100%; height: 100px; line-height: 100px; } #content { background-color: #E3DECC; color: #292929; width: 100%; height: 600px; line-height: 600px; } #footer { background-color: #A18E5C; color: #fff; width: 100%; height: 100px; line-height: 100px; } #backtotop { position: fixed; right: 20px; bottom: 20px; z-index: 9000; width: 70px; height: 70px; } #backtotop a { color: #fff; width: 70px; height: 70px; text-decoration: none; display: block; line-height: 70px; font-size: 14px; background-color: #333333; border: 1px solid #FFF; border-radius: 50%; }ボタンを固定表示するため、ボタンのボックス(#backtotop)にはposition:fixed;を指定しています。
ボタン本体(#backtotop a)はブロック要素にし、border:radius:50%;で円形にしています。
jQuery
$(function() { var topBtn = $('#backtotop'); topBtn.hide(); $(window).on('scroll', function() { if ($(this).scrollTop() > 200) { topBtn.fadeIn(); } else { topBtn.fadeOut(); } }); topBtn.on('click', function() { $('*').animate({ scrollTop: 0 }, 700, 'easeOutQuint'); return false; }); });.hide()
初期状態では、ボタンは非表示にしています。
topBtn.hide();$(window).on('scroll', function () {...}
$(window).on('scroll', function () {...}は、スクロールをしたときの処理です。
if ($(this).scrollTop() > 200) {...}
スクロール量が200pxを超えるとボタンが表示され、200px未満となれば非表示にします。
if ($(this).scrollTop() > 200) { topBtn.fadeIn(); } else { topBtn.fadeOut(); }topBtn.on('click', function() {...}
表示されたボタンをクリックすると、scrollTop: 0で画面がページの先頭に戻ります。
topBtn.on('click', function() { $('*').animate({ scrollTop: 0 }, 700, 'easeOutQuint'); return false; });以上で、クリックするとページの先頭へ素早く戻る「TOPへ戻るボタン」を終わります。