TOPへ戻るボタンを組み込む
STACK Websiteに、TOPへ戻るボタンを組み込む。プラグインでと思ったけど、HTMLで組み込んだ。後々、テーマを再利用するには、HTMLで組み込んでおいた方が便利だろうから。
ネットで紹介されていた、下記を参照。
●HTMLのメモ
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
【index.phpなど】 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <a href="#top" class="page_top"><i class="fa fa-angle-double-up"></i></a> <script type="text/javascript"> $(function() { var pageTop = $('.page_top'); pageTop.hide(); $(window).scroll(function () { if ($(this).scrollTop() > 600) { pageTop.fadeIn(); } else { pageTop.fadeOut(); } }); pageTop.click(function () { $('body, html').animate({scrollTop:0}, 500, 'swing'); return false; }); }); </script> |
●デザインのためのメモ
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
【style.css】 .page_top { position:fixed; bottom:10px; right:10px; padding: 5px 15px; color:#fff; font-size:20px; text-decoration:none; background:#000; border-radius: 30px; -webkit-border-radius: 30px; -moz-border-radius: 30px; z-index: 100; } .page_top:hover { background:#000; opacity: 0.7; |