jQueryでスムーススクロール機能付きのトップに戻るボタンを作る

jQueryでスムーススクロール機能付きのトップに戻るボタンを作る方法を紹介します。

コピペで簡単に実装できるサンプルを用意したので、自分好みにカスタマイズしてみてください。

サンプル

サンプルページ

HTML

<div class="btn-top"><span></span></div>

CSS

/* トップへ戻るボタン */
.btn-top {
  position: fixed;
  right: 30px;
  bottom: 30px;
  background: rgba(204,204,204,0.8);
  border-radius: 50%;
  width: 50px;
  height: 50px;
}
.btn-top span {
  position: relative;
  display: block;
  width: 50px;
  height: 50px;
  cursor: pointer;
}
.btn-top span::before {
  content: "";
  display: block;
  position: absolute;
  top: 20px;
  left: 0;
  right: 0;
  margin: auto;
  width: 18px;
  height: 18px;
  border-top: 4px solid #ffffff;
  border-left: 4px solid #ffffff;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}

jQuery

$('.btn-top').click(function () {
    $('body,html').animate({
      scrollTop: 0
    }, 800); // スクロール速度
    return false;
});