功能实现:
1、页面开始时没有返回顶部按钮。
2、页面滚动到指定位置以下,显示返回顶部按钮。
3、返回顶部按钮,固定在页面。
4、点击返回顶部按钮后,页面回到顶部。
5、页面回到顶部后,返回顶部按钮隐藏。
需要了解的知识:
jquery方法:
$().scrollTop()
匹配元素相对滚动条顶部的偏移。
属性:
scrollTop属性
滚动条到顶部的垂直高度,可写可读。
HTML
<body>
<div id="toTop">回到顶部</div>
</body>
CSS
body {
height: 2000px;
}
#toTop {
width: 50px;
height: 50px;
background-color: #008000;
font-size: 18px;
text-align: center;
/* 固定定位 */
position: fixed;
bottom: 20px;
left: 100px;
/* 隐藏 */
display: none;
}
jQuery
<script src="../jquery-3.5.1.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(window).scroll(function() {
// 获取滚动条的垂直滚动值
var scrolltop = $(window).scrollTop();
// 垂直滚动值大于500时,显示回到顶部,否则隐藏
if (scrolltop >= 500) {
$("#toTop").show();
} else {
$("#toTop").hide();
}
});
// 点击回到顶部,将html或body的scrollTop属性值设为0
$("#toTop").click(function() {
$("html,body").stop().animate({
"scrollTop": "0px"
});
});
</script>