在JS中如何实现回到顶部效果

2020-11-27 来源：独旅网

这篇文章主要为大家详细介绍了JS实现带动画的回到顶部效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

本文实例为大家分享了JS实现带动画的回到顶部效果的具体代码，供大家参考，具体内容如下

实现功能：滚动到页面某一个高度的时候，回到顶部按钮出现。点击之后回到网页顶部，按钮隐藏。
代码如下，jQuery引用的是百度CDN的，因此整段代码复制下来后在浏览器运行即可。

<!DOCTYPE html> 
<html> 
 
 <head> 
 <meta charset="UTF-8"> 
 <title>实现回到顶部功能</title> 
 </head> 
 <style> 
 * { 
 padding: 0; 
 margin: 0; 
 } 
 
 .gotop { 
 display: none; 
 position: fixed; 
 bottom: 50px; 
 right: 50px; 
 width: 40px; 
 height: 40px; 
 padding: 5px; 
 background-color: #F00; 
 color: #FFF; 
 text-align: center; 
 cursor: pointer; 
 } 
 </style> 
 <script src="http://libs.baidu.com/jquery/1.8.1/jquery.min.js"></script> 
 
 <body> 
 <p>这是一段文字</p><br /><br /><br /><br /><br /><br /> 
 <p>这是一段文字</p><br /><br /><br /><br /><br /><br /> 
 <p>这是一段文字</p><br /><br /><br /><br /><br /><br /> 
 <p>这是一段文字</p><br /><br /><br /><br /><br /><br /> 
 <p>这是一段文字</p><br /><br /><br /><br /><br /><br /> 
 <p>这是一段文字</p><br /><br /><br /><br /><br /><br /> 
 <p>这是一段文字</p><br /><br /><br /><br /><br /><br /> 
 <p>这是一段文字</p><br /><br /><br /><br /><br /><br /> 
 <p>这是一段文字</p><br /><br /><br /><br /><br /><br /> 
 <p>这是一段文字</p><br /><br /><br /><br /><br /><br /> 
 
 <p id="goTop" class="gotop"> 
 <p>回到</p> 
 <p>顶部</p> 
 </p> 
 </body> 
 <script> 
 function goTop() { 
 
 $(window).scroll(function() { 
 var $scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop; //兼容浏览器 
 if($scrollTop > 100) { //滚动高度可调 
 $("#goTop").show(); 
 } else { 
 $("#goTop").hide(); 
 }; 
 }) 
 
 $("#goTop").on("click", function() { 
 $("body").stop().animate({ 
 scrollTop: 0 
 }); 
 }) 
 
 } 
 
 goTop(); 
 </script> 
 
</html>

上面是我整理给大家的，希望今后会对大家有帮助。

Vue组件通信（详细教程）

Vue Socket.io源码详细分析

Javascript的日常错误

显示全文

全部栏目

在JS中如何实现回到顶部效果