jQuery

【jQuery】ページの先頭にスクロールして戻るボタンScroll to top Button

October 10, 2016
Scroll To Top Button

Scroll to top Buttonはページの先頭にスクロールして戻るボタンを実装するjQueryプラグイン。

jQuery

 $(document).ready(function(){
  $(window).scroll(function(){
      if ($(this).scrollTop() > 100) {
          $('.scrollUpButton').fadeIn();
      } else {
          $('.scrollUpButton').fadeOut();
      }
  });
  $('.scrollUpButton').click(function(){
      $("html, body").animate({ scrollTop: 0 }, 500);
      return false;
  });
 });

CSS

.scrollUpButton {
 display: none;
 opacity: 0.6;
 position: fixed;
 bottom: 10px;
 right: 10px;
 display: none;
 background: #000;
 color: #fff;
 font-size: 1.5em;
 text-decoration: none;
 padding: 5px 10px 5px 10px;
}
.scrollUpButton:hover, .scrollUpButton:focus {
 outline: none;
 text-decoration: none;
 color: #fff;
 opacity: 1;
}

HTML

<a href="#" class="scrollUpButton">&#9650</a>

MITライセンス