スクロールしたらフェードインしながら表示される「TOPへ戻る」
Result
jQuery
//初期は非表示
$("#back-top").hide();
$(function () {
$(window).scroll(function () {
//100pxスクロールしたら
if ($(this).scrollTop() > 100) {
//フェードインで表示
$('#back-top').fadeIn();
} else {
$('#back-top').fadeOut();
}
});
//ここからクリックイベント
$('#back-top a').click(function () {
$('body,html').animate({
scrollTop: 0
}, 500);
return false;
});
});
css
#back-top {
position: fixed;
bottom: 30px;
margin-left: 150px;
}
#back-top a {
width: 108px;
height: 108px;
display: block;
text-align: center;
text-decoration: none;
color: #666;
background:#eee;
}
#back-top a:hover {
color: #000;
}
html
<p id="back-top">
<a href="#top">Back to Top</a>
</p>
via
Animated Scroll to Top