js ページ上部へ戻るボタン

html

<div class="scroll-top">
    <button id="scroll-top"></button>
</div>

css

/*===================================================================
    フッター
===================================================================*/
.scroll-top #scroll-top {
  position: fixed;
  bottom: 10px;
  right: 10px;
  background-color: transparent;
  display: block;
  width: 70px;
  height: 70px;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  background-image: url(../../images/ico-pagetop.svg);
  border: 0;
}

@media screen and (max-width: 768px) {
  .scroll-top #scroll-top {
    width: 40px;
    height: 40px;
  }
}

.scroll-top #scroll-top:hover {
  opacity: 0.8;
}

###js

/*==============================
  Page Top
==============================*/
$(function(){
  $('#scroll-top').on('click',function(){
    $('body,html').animate({scrollTop: 0}, 500);
  });

  //link anc otherpage 
  $(window).on('load', function() {
    var headerHeight = 100;
    var url = $(location).attr('href');
    if(url.indexOf("#") != -1){
      var id = url.split("#");
      var $target = $('#' + id[id.length - 1]);
      if($target.length){
        var pos = $target.offset().top - headerHeight;
        $("html, body").animate({scrollTop:pos}, 0);
      }
    }
  });

});

/*==============================
  Anker Link
==============================*/
$(function(){
   $('a[href^="#"]').on('click', function(){
      var speed = 400;
      var href= $(this).attr('href');
      var target = $(href == '#' || href == '' ? 'html' : href);
      var position = target.offset().top;
      $('body,html').animate({scrollTop:position}, speed, 'swing');
      return false;
   });
});