JS实现带动画的回到顶部效果

2019-11-19 14:38:01

字体：大中小

来源：转载

供稿：网友

本文实例为大家分享了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 />      <div id="goTop" class="gotop">       <p>回到</p>       <p>顶部</p>     </div>   </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>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持武林网。

上一篇：ionic3实战教程之随机布局瀑布流的实现方法

下一篇：JavaScript实现元素滚动条到达一定位置循环追加内容