回到顶部功能需求：
- 当浏览器下拉时按钮显示，回到顶部时按钮隐藏；
- 点击按钮时，通过jquery的animate滑到顶部。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js" type="text/javascript"></script>
<style type="text/css">
.main {
width: 930px;
height: 2236px;
margin: 0 auto;
background-color: #808080;
}
.main a.returnTop {
display: none;
position: fixed;
bottom: 50px;
left: 50%;
margin-left: 500px;
width: 50px;
height: 50px;
border-radius: 50%;
background-color: #000000;
text-align: center;
line-height: 50px;
}
</style>
</head>
<body>
<div class="main">
<a href="javascript:void(0);" class="returnTop" id="returnTop">Top</a>
</div>
<!-- JS部分 -->
<script type="text/javascript">
// 显示按钮
window.onscroll = function(){ //元素滚动时执行 onscroll 事件在元素滚动条在滚动时触发。
var sideToolbar = $("#returnTop");//定义变量 sideToolbar 翻译：侧工具栏
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>
</body>
</html>
