jquery实现回到顶部
调用gotoTop函数,为窗口增加scroll事件,传入页面滚动的最小高度,没有传值默认600,在此传了200,当滚动条高度大于200的时候,回到顶部的div显示,否则消失。
点击回到顶部,定义一个动画,让窗口的scrollTop逐渐减至0;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>回到顶部</title>
<script src="自己的jquery文件"></script>
<style>
.toTop{
width: 100%;
height: 1000px;
background: pink;
}
.header {
color:pink;
width: 100%;
height: 200px;
margin: 0 auto;
text-align: center;
font-size: 20px;
}
.footerbox {
position: fixed;
right: 50px;
bottom: 50px;
width: 54px;
height: 54px;
background: skyblue;
color: #fff;
line-height: 54px;
text-align: center;
border-radius: 50%;
cursor: pointer;
display: none;
}
</style>
</head>
<body>
<div class="header">这是顶部</div>
<!-- 很多内容 -->
<br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br>
<!-- 很多内容 -->
<div class="footerbox" id="gotoTop">toTop</div>
</body>
<script>
function gotoTop(minHeight){
// 定义点击返回顶部图标后向上滚动的动画
$("#gotoTop").click(
function(){$('html,body').animate({scrollTop:'0px'},'slow');
})
// 获取页面的最小高度,无传入值则默认为600像素
minHeight? minHeight = minHeight:minHeight = 600;
// 为窗口的scroll事件绑定处理函数
$(window).scroll(function(){
// 获取窗口的滚动条的垂直滚动距离
var s = $(window).scrollTop();
// 当窗口的滚动条的垂直距离大于页面的最小高度时,让返回顶部图标渐现,否则渐隐
if( s > minHeight){
$("#gotoTop").fadeIn(500);
}else{
$("#gotoTop").fadeOut(500);
};
});
};
gotoTop(200);
</script>
</html>