实现”回到顶部按钮”这个功能要满足两个要求，
1. 当浏览器下拉时按钮显示，回到顶部时按钮隐藏；
2. 点击按钮时，通过jquery的animate函数滑到顶部。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js" type="text/javascript"></script>
<style type="text/css">
.main {
width: 930px;
height: 2236px;
margin: 0 auto;
background-color: gray;
}
.main a.returnTop {
display: none;
position: fixed;
bottom: 50px;
left: 50%;
margin-left: 500px;
width: 50px;
height: 50px;
background-color: aqua;
}
</style>
</head>
<body>
<div class="main">
<!-- 返回置顶 = {go_top} start -->
<a href="javascript:void(0);" class="returnTop" id="returnTop">Top</a>
</div>
</body>
<script type="text/javascript">
// 显示按钮
window.onscroll = function(){ //元素滚动时执行 onscroll 事件在元素滚动条在滚动时触发。
var sideToolbar = $("#returnTop");//定义变量 侧工具栏
if((document.body.scrollTop||document.documentElement.scrollTop)>500){ //判断滚动条超过 500px - 可修改 -
sideToolbar.css('display','block'); //执行显示
}else{
sideToolbar.css('display','none'); //否则隐藏
}
}
// 按钮点击事件
$("#returnTop").click(function(){
var speed = 800;//滑动的速度
$("html,body").animate({ scrollTop: 0 }, speed); // 滑动的速度(speed)越小越快 - 可修改 -
});
</script>
</html>document.documentElement.scrollTop(获取滚动条位置)
要获取当前页面的滚动条纵坐标位置，用：
document.documentElement.scrollTop;
而不是：
document.body.scrollTop;
documentElement 对应的是 html 标签，而 body 对应的是 body 标签
获取当前页面滚动条纵坐标的位置：document.body.scrollTop与document.documentElement.scrollTop
获取当前页面滚动条横坐标的位置：document.body.scrollLeft与document.documentElement.scrollLeft
1314
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
