【jQuery】ページの先頭にスクロールして戻るボタン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ライセンス

 
Scroll To Top Button

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

  • LATEST
  • RELATED
  • POPULAR