常见的返回顶部大多数都是通过用js 或者 jq写出来的，但也有少部分直接用的 HTML 锚点实现的，返回顶部这个特效用锚点带来的用户体验不是很好。没有那种缓冲效果(一闪而过的效果)。所以得用到脚本，接下来用 jQuery 写一个简单常用的返回顶部的效果。
效果如图：
默认效果：
出现按钮：
接下来点击蓝色方块就会回到页面顶部（可以换成图片）
实现步骤：
html代码：
1 <div class="top"></div> 2 <div> 3 <p>今天天气很好!</p> 4 <p>今天天气很好!</p> 5 <p>今天天气很好!</p> 6 <p>今天天气很好!</p> 7 <p>今天天气很好!</p> 8 <p>今天天气很好!</p> 9 <p>今天天气很好!</p> 10 <p>今天天气很好!</p> 11 <p>今天天气很好!</p> 12 <p>今天天气很好!</p> 13 <p>今天天气很好!</p> 14 <p>今天天气很好!</p> 15 <p>今天天气很好!</p> 16 <p>今天天气很好!</p> 17 <p>今天天气很好!</p> 18 <p>今天天气很好!</p> 19 <p>今天天气很好!</p> 20 <p>今天天气很好!</p> 21 <p>今天天气很好!</p> 22 <p>今天天气很好!</p> 23 <p>今天天气很好!</p> 24 <p>今天天气很好!</p> 25 <p>今天天气很好!</p> 26 <p>今天天气很好!</p> 27 <p>今天天气很好!</p> 28 <p>今天天气很好!</p> 29 <p>今天天气很好!</p> 30 <p>今天天气很好!</p> 31 <p>今天天气很好!</p> 32 <p>今天天气很好!</p> 33 <p>今天天气很好!</p> 34 <p>今天天气很好!</p> 35 <p>今天天气很好!</p> 36 <p>今天天气很好!</p> 37 <p>今天天气很好!</p> 38 <p>今天天气很好!</p> 39 <p>今天天气很好!</p> 40 <p>今天天气很好!</p> 41 <p>今天天气很好!</p> 42 <p>今天天气很好!</p> 43 <p>今天天气很好!</p> 44 <p>今天天气很好!</p> 45 <p>今天天气很好!</p> 46 <p>今天天气很好!</p> 47 <p>今天天气很好!</p> 48 <p>今天天气很好!</p> 49 <p>今天天气很好!</p> 50 <p>今天天气很好!</p> 51 <p>今天天气很好!</p> 52 </div>
简单写一下样式
css代码：
1 * { 2 margin: 0; 3 padding: 0; 4 list-style: none; 5 border: none; 6 } 7 8 body { 9 background-color: #ccc; 10 } 11 12 p { 13 margin-bottom: 20px; 14 text-align: center; 15 } 16 17 .top { 18 width: 80px; 19 height: 80px; 20 background-color: #00a4e4; 21 position: fixed; 22 right: 10px; 23 bottom: 10px; 24 }
jQuery代码：
1 // 先引入第三方的jq文件 2 <script src="./jquery/jquery-3.4.1.js"></script> 3 <script> 4 $(function() { 5 // 先隐藏回到顶部按钮 6 $(".top").hide(); 7 8 $(window).scroll(function() { 9 // 判断scrollTop的兼容 10 var scrollTop = document.documentElement.scrollTop || document.body.scrollTop; 11 // 判断滚动的距离 12 if (scrollTop > 150) { 13 // 大于150显示回到顶部按钮 14 $(".top").show(); 15 } else { 16 // 否则隐藏按钮 17 $(".top").hide(); 18 } 19 }) 20 $(".top").click(function() { 21 // 调用jq的animate函数实现动画效果 22 $(‘html,body‘).animate({ 23 scrollTop: 0 24 }, 1000); 25 }) 26 }) 27 </script>
然后效果就能实现啦~ 就会看到缓慢的回到页面顶部！ 实现的方法有很多，找到适合的解决办法就可以。