すなばいじり

はてなブログを使って、トンピーを揃えるまで止めないブログ。ふっくらかわいい。

するするとページTOPへ戻るやつ

スマホ表示で時々ある、スムーズに戻るやつです。
設定→詳細設定→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>

画面の右下に固定して、枠を付けてあります。文字と枠以外は透明です。


こちらは、取り外してしまう可能性があるので、メモ代わりのエントリーになります。