文章内容
一、按钮显示
.container #toTop {
width: 40px;
height: 60px;
display: inline-block;
position: fixed;
background: url(top.png) no-repeat;
background-size: 100%;
bottom:20px;
right: 20px;
opacity: 0;
}
<div class='container'>
<span id='toTop'></span>
</div>
二、自动隐藏与显示
$(window).on('scroll', function(e) {
if (e.target.scrollingElement.scrollTop < 10) {
$('#toTop').css({
'opacity' : 0
});
} else {
$('#toTop').css({
'opacity' : 0.8
});
}
});
三、点击事件
$('#toTop').on('click', function() {
$('body, html').animate({
scrollTop : 0
}, 500, function() {
$('#toTop').css({
'opacity' : 0
});
});
});