大家好，又见面了，我是你们的朋友全栈君。
之前做“返回顶部”，一直都是无动态效果的。瞬间就回到了顶部。这次写一个带有动态效果的。也就是利用animate方法来实现。下面是具体代码。
HTML:
<body>
<div class="content">
<p>这是测试文档</p>
...
<p>这是测试文档</p>
</div>
<button class="toTopBtn" >回到顶部</button>
</body>
JS:
<script type="text/javascript">
/*ie9以上(包括)*/
$(function(){
// 页面滚动监听
$(window).scroll(function(){
var sc = $(window).scrollTop(); // 距离顶部的距离
//距离顶部的距离超过900px，[回到顶部]按钮出现，否则消失
if (sc > 900) {
$(".toTopBtn").show();
} else {
$(".toTopBtn").hide();
}
});
// 点击回到顶部按钮
$(".toTopBtn").click(function(){
//此处无动态效果，瞬间回到顶部
$(document).scrollTop(0);
//此处利用animate动画添加动态效果
$('html').animate({
scrollTop:0},300);
});
});
</script>
CSS:
<style type="text/css"> .toTopBtn {
display: none;
position: fixed;
bottom: 30px;
right: 20px;
width: 50px;
height: 50px;
font-size: 12px;
text-align: center;
background-color: #0033FF;
cursor: pointer;
font-weight: 600;
border-radius: 8px;
}
</style>
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
发布者：全栈程序员-用户IM，转载请注明出处：https://javaforall.cn/158412.html原文链接：https://javaforall.cn
【正版授权，激活自己账号】： Jetbrains全家桶Ide使用，1年售后保障，每天仅需1毛
【官方授权 正版激活】： 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...
