下面是源代码:样式按个人需求调整
<html>
<div class='fhdb' style='display:none;position:absolute;bottom:30px;right:30px;background-color:black;padding:10px;color:#ccc'>
返回顶部
</div>
</html>
<script>
$(
function
(){
$(window).scroll(
function
() { //添加滚动事件
if
($(window).scrollTop() >= 150){ //当滚轴与顶部距离大于150时显示返回顶部
$(
'.fhdb'
).fadeIn(200); //括号内数字是渐入时间
}
else
{ //当滚轴与顶部距离小于150时隐藏返回顶部
$(
'.fhdb'
).fadeOut(200); //括号内数字是淡出时间
}
});
$(
'.fhdb
'
).click(
function
(){ //单击返回顶部则返回到顶部
$(
'html,body'
).animate({scrollTop:
'0px'
}, 500);//括号内数字是返回顶部时间
});
});
</script>