实现”回到顶部按钮”这个功能要满足两个要求
- 当浏览器下拉时按钮显示，回到顶部时按钮隐藏；
- 点击按钮时，通过jquery的animate函数滑到顶部。
WechatIMG203.jpeg
<!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: 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">
<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>
要获取当前页面的滚动条纵坐标位置，用：document.documentElement.scrollTop(获取滚动条位置)
而不是： document.body.scrollTop;
documentElement 对应的是 html 标签，而 body 对应的是 body 标签
var $ReturnTop = $('.m_ToolBar_ReturnTop');
$(window).on('scroll load', function() {
if ($ReturnTop.is('animated')) return;
if ($(window).scrollTop() > 400) {
$ReturnTop.slideDown(500);
} else {
$ReturnTop.slideUp(500);
}
})
$ReturnTop.on('click', function() {
$('html,body').animate({
scrollTop: 0
}, 500);
});