まず、作成するページのheader部分に以下のjqueryを読み込みます。
|
1 | <script type="text/javascript" src="js/jquery.min.js"></script> |
さらに
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <script type="text/javascript"> $(function() { var topBtn = $('.totop'); //スクロールしてトップに戻る //500の数字を大きくするとスクロール速度が遅くなる topBtn.click(function () { $('body,html').animate({ scrollTop: 0 }, 500); return false; }); }); </script> |
「上へ戻る」ボタンを置きたい場所に以下のソースを挿入。
デザインはお好みにcssで調整してください。
|
1 2 3 4 5 6 | <p class="totop"> <a href="#header"> <img src="/*表示したいボタンの画像*/" alt="上へ戻る"> </a> </p> //ベッダー部分にあるheaderというidのところまでスクロールする |
