スマホ表示で時々ある、スムーズに戻るやつです。
設定→詳細設定→headに要素を追加 へ貼り付けると使えるやつになります。
スタイルも同時に適用すると、画面右下にボタンが表示されるようになります。
こちらは、元々ある要素をボタンとして再利用しているので、スタイルのみでもTOPへ戻る事ができます。
<script> //スムーズに戻るやつ window.addEventListener("DOMContentLoaded", function(){ $('a[href^=#]').click(function(){ var href= $(this).attr("href"); var target = $(href == "#" || href == "" ? 'body' : href); var position = target.offset().top; $("html, body").animate({scrollTop:position}, 500, "easeOutCubic"); return false; }); }, false); </script>
500
の部分が秒数(ミリ秒:上の例では 500msec = 0.5秒)、
"easeOutCubic"
の部分がシュッと動くパターンになります。
スタイル
<style> .pagetop { position: fixed; bottom: 0px; border: solid 1px; width: 66px; right: 10px; } </style>
画面の右下に固定して、枠を付けてあります。文字と枠以外は透明です。
こちらは、取り外してしまう可能性があるので、メモ代わりのエントリーになります。