TOPへスクロールするボタン

右下によくある
押すとページの一番上にスクロールするボタン

HTML

footerの下/bodyの上によく配置します。

 <div class="pagetop"><a href="#"></a></div>

SCSS

.totop {
    width: 46px;
    height: 51px;
    position: fixed;
    right: 27px;
    bottom: 39px;
    z-index: 3;
}
.totop a {
    background: #d8d8d8;
    position: relative;
    width: 50px;
    height: 50px;
    display: inline-block;

    &::before {
        content: "";
        width: 15px;
        height: 15px;
        border: 0px;
        border-top: solid 2px #3e3e3e;
        border-right: solid 2px #3e3e3e;
        -ms-transform: rotate(-45deg);
        -webkit-transform: rotate(-45deg);
        transform: rotate(-45deg);
        position: absolute;
        top: 25px;
        left: 17px;
        margin-top: -4px;
    }

    &:hover {
        opacity: 0.8;
    }
}
.pagetop {
    width: 46px;
    height: 51px;
    position: fixed;
    right: 29px;
    bottom: 39px;
    z-index: 3;
    @include mq(sm) {
        right: 36px;
        bottom: 15px;
    }
}
.pagetop a {
    background: #d8d8d8;
    position: relative;
    width: 50px;
    height: 50px;
    display: inline-block;

    &::before {
        content: "";
        width: 15px;
        height: 15px;
        border: 0px;
        border-top: solid 2px #3e3e3e;
        border-right: solid 2px #3e3e3e;
        -ms-transform: rotate(-45deg);
        -webkit-transform: rotate(-45deg);
        transform: rotate(-45deg);
        position: absolute;
        top: 25px;
        left: 17px;
        margin-top: -4px;
    }

    &:hover {
        opacity: 0.8;
    }
}.totop {
    width: 46px;
    height: 51px;
    position: fixed;
    right: 27px;
    bottom: 39px;
    z-index: 3;
}
.totop a {
    background: #d8d8d8;
    position: relative;
    width: 50px;
    height: 50px;
    display: inline-block;

    &::before {
        content: "";
        width: 15px;
        height: 15px;
        border: 0px;
        border-top: solid 2px #3e3e3e;
        border-right: solid 2px #3e3e3e;
        -ms-transform: rotate(-45deg);
        -webkit-transform: rotate(-45deg);
        transform: rotate(-45deg);
        position: absolute;
        top: 25px;
        left: 17px;
        margin-top: -4px;
    }

    &:hover {
        opacity: 0.8;
    }
}

js

//pagetop
jQuery(function() {
  var pagetop = $('.pagetop');   
  pagetop.hide();
  $(window).scroll(function () {
      if ($(this).scrollTop() > 100) {  //100pxスクロールしたら表示
          pagetop.fadeIn();
      } else {
          pagetop.fadeOut();
      }
  });
  pagetop.click(function () {
      $('body,html').animate({
          scrollTop: 0
      }, 500); //0.5秒かけてトップへ移動
      return false;
  });
});