html代码
<a href="javascript:;" class="btn_bottom_top sprite js_btn_top">
<span class="icon_txt">返回顶部</span>
</a>
<a href="javascript:;" class="btn_bottom_feedback sprite js_btn_feedback">
<span class="icon_txt">意见反馈</span>
</a>
<a href="javascript:;" class="btn_bottom_player js_openplayer">
<span class="icon_txt">播放器</span>
</a>
css代码
.btn_bottom_top,
.btn_bottom_feedback,
.btn_bottom_player {
position: fixed;
right: 40px;
width: 50px;
height: 50px;
background-image: url(/images/icon_sprite.png);
}
.btn_bottom_top {
display: none;
bottom: 142px;
background-position: 0 -120px;
}
.btn_bottom_feedback {
bottom: 91px;
background-position: -100px -120px;
}
.btn_bottom_player {
bottom: 40px;
background-position: -150px -280px;
}
.btn_bottom_feedback:hover,
.btn_bottom_player:hover {
background: #31c27c;
color: #fff;
}
.btn_bottom_feedback:hover .icon_txt {
line-height: 16px;
padding: 9px;
}
.btn_bottom_player:hover .icon_txt {
line-height: 50px;
}
.btn_bottom_feedback:hover .icon_txt,
.btn_bottom_player:hover .icon_txt {
display: block;
font-size: 12px;
text-align: center;
}
js代码
var clientHeight = document.documentElement.clientHeight;
var timer = null;
var isTop = true;
//滚动条滚动
$(window).scroll(function () {
//获取距顶部的距离
var top = document.documentElement.scrollTop || document.body.scrollTop;
if (top >= clientHeight) {
$('.js_btn_top').show();
} else {
$('.js_btn_top').hide();
}
if (!isTop) {
clearInterval(timer);
}
isTop = false;
});
$('.js_btn_top').click(function () {
clearInterval(timer);
timer = setInterval(function () {
var top = document.documentElement.scrollTop || document.body.scrollTop;
var ispeed = Math.ceil(top/6);
document.documentElement.scrollTop = document.body.scrollTop = top - ispeed;
isTop = true;
if(top == 0){
clearInterval(timer);
}
}, 30);
});