コピペで簡単実装【TOPに戻るボタン】の紹介。
何も考えない。コピペで簡単実装しましょう（笑）
目次
jQueryの呼び出し
まずはjQueryをhtmlファイルに呼び出します。
htmlファイルにコピペ
|
1 2 |
<!--bodyタグ内最後の方--> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> |
各ファイルにコピペでTOPに戻るボタンの実装
htmlファイルにコピペ
|
1 |
<p class="page-top"><a href="#wrap">TOPに戻る</a></p> |
cssファイルにコピペ
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
.page-top { position: fixed; bottom: 20px; right: 20px; font-size: 77%; } .page-top a { background: #666; text-decoration: none; color: #fff; width: 100px; padding: 30px 0; text-align: center; display: block; border-radius: 5px; } .page-top a:hover { text-decoration: none; background: #999; } |
jsファイルにコピペ
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
$(function() { var topBtn = $('.page-top'); topBtn.hide(); $(window).scroll(function () { if ($(this).scrollTop() > 100) { topBtn.fadeIn(); } else { topBtn.fadeOut(); } }); topBtn.click(function () { $('body,html').animate({ scrollTop: 0 }, 500); return false; }); }); |
細かいデザイン調整はhtmlファイルとcssで、お好みで！