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 />

    <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>

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