jquery 置顶按钮
需求
返回到页面的最上方。这个功能在简书阅读的时候右下角也有，如下：
点击这个按钮，直接就返回到最上方了。
当文档达到最上方的时候，置顶按钮消失。
编写基本HTML\CSS
这个图片我用了阿里的矢量图库，如果不懂如何使用的朋友，可以访问iconfont阿里巴巴矢量图标库从注册到使用。
再写一些p段落，用来形成滚动条，如下：
好了，下面只需要监听滚动事件，进行处理即可。
点击置顶按钮，设置返回顶部
这里就涉及到如何设置返回顶部的兼容性写法，如下：
$('html,body').animate({"scrollTop":0});
设置置顶按钮的显示和隐藏
下一个问题就是，这个置顶按钮不用一直显示，只有文档拖动到下方一定的距离才会显示，上方的位置则不用显示。
当滚动条下拉，则显示。
基本上已经实现好了这个置顶按钮了。
完整代码
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="css/font_43t074pzx63/iconfont.css">
<style type="text/css">
*{
margin: 0;
padding: 0;
}
p{
text-align: center;
}
.icon-zhiding{
font-size: 50px;
color: rgb(18,150,219);
position: fixed;
bottom: 50px;
right: 50px;
cursor: pointer;
display: none;
}
</style>
<script type="text/javascript" src="jquery/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
$(function(){
$(window).scroll(function(){
console.log($(document).scrollTop());
if($(document).scrollTop() > 200){
// $('.icon-zhiding').show();
$('.icon-zhiding').fadeIn();
}else{
$('.icon-zhiding').fadeOut();
}
});
$(".icon-zhiding").click(function(){
console.log($('html,body').scrollTop());
$('html,body').animate({"scrollTop":0});
});
})
</script>
</head>
<body>
<span class="iconfont icon-zhiding"></span>
<!-- (p{文档内容}+br*10)*5 -->
<p>文档内容</p>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<p>文档内容</p>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<p>文档内容</p>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<p>文档内容</p>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<p>文档内容</p>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
</body>
</html>本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2019.04.19 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录