【jQuery】スムースscroll メモ

#HTML

filename.html

<a href="#">
  <button class="scroll-top" id="js-button">
    <i class="fa fa-chevron-up" aria-hidden="true"></i>
  </button>
</a>

#CSS

filename.css

/*scroll-top*/
.scroll-top {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 100;
  background-color: #999;
  opacity: .8;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: none;
  color:  #fff;
}
.scroll-top:hover {
cursor: pointer;
opacity: 0.8;
}

#JavaScript

filename.js

$(function(){
        // #で始まるリンクをクリックしたら実行されます
  $('a[href^="#"]').click(function() {
    // スクロールの速度
    var speed = 500; // ミリ秒で記述
    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;
    });
  });