下面的<a>标签里面的href=“#top”就表示点击它就可以回到顶部，就不写回到顶部的代码了
解释一下：首先我们要做的功能是：用户打开网页，看不到按钮，滚动到了离页面顶端较远的地方，按钮自己出来了，点击按钮回到顶部，按钮又消失了
代码思路：当浏览器的滚动条靠近顶端的时候，“回到顶部”按钮始终隐藏（包括刚打开网页的时候，设置display:none），使用hide()方法；
当滚动条位置有了变化，触发浏览器窗口的滚动事件（scroll()方法），当滚动条位置距离初始位置大于一定数值（像素值）时，按钮显示（show()方法）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#ym{
text-align: center;
}
#return-top{
width: 50px;
height: 50px;
background-color: #8FBC8F;/*背景颜色*/
color: white;/*字体颜色*/
position: fixed;/*固定按钮的位置，不随页面滚动*/
bottom: 40px;/*距离浏览器窗口底部的距离*/
right: 40px;/*距离浏览器窗口最右侧的距离*/
text-align: center; display:none;/*重点！我们打开页面时不需要看到这个按钮，设置为不显示*/
}
#return-top a{
font-size: 1vw;
color: white;
text-decoration: none; /*不要下划线*/
line-height: 20px; /*行高*/
display:block; /*不使用这个属性的话，文字对不齐。。。具体原因我没了解过*/
margin-top: 2px; /*2像素差不多了*/
}
</style>
</head>
<body>
<div id="ym">
<img src="https://www.qiquanji.com/data/img/dmj/201904041554385968512032.jpg"/>
<img src="https://www.qiquanji.com/data/img/dmj/201904041554385968145935.jpg"/>
<img src="https://www.qiquanji.com/data/img/dmj/201904041554385968212716.jpg"/>
</div>
<div id="return-top">
<a href="#top">返回顶部</a>
</div>
</body>
<script src="../tu/jquery-1.11.3.min.js"></script>
<script type="text/javascript">
$(window).scroll(function(){
if($(this).scrollTop()>300){
$("#return-top").show()
}else{
$("#return-top").hide()
}
})
</script>
</html>
原文链接：https://www.qiquanji.com/post/7152.html
本站声明:网站内容来源于网络,如有侵权,请联系我们,我们将及时处理。
微信扫码关注
更新实时通知