ツクログ

tsukulognet

tsukulognet

道産子。Reactでなまら面白いものを作りたい。

クリックするとページの先頭へ素早く戻る「TOPへ戻るボタン」

eye catch

ある程度スクロールすると画面右下に出現し、クリックすると瞬時にページ先頭へ戻るボタンの作り方です。

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へ戻るボタン」を終わります。