jQuery---小火箭返回顶部案例，

3672Js.Com2020-02-01 12:00 来源:未知阅读:13120 关注度3

jQuery---小火箭返回顶部案例，

小火箭返回顶部案例

1. 滚动页面，当页面距离顶部超出1000px，显示小火箭。

封装在scroll函数里，当前页面距离顶部为$(window).scrollTop >=1000

小火箭显示和隐藏用fadeIn和fadeOut

      //当页面超出1000px的时候，让小火箭显示，如果小于1000px，则隐藏
      $(window).scroll(function () {
        if ($(window).scrollTop() >= 1000) {
          $(".actGotop").stop().fadeIn(1000);
        } else {
          $(".actGotop").stop().fadeOut(1000);
        }
      })
    });

2. 当小火箭出现后，点击小火箭，返回到页面顶部。

在外面出册点击事件，获取页面，html或者body, 返回用animate动画函数，到顶部即scrollTop为0，时间可以设置

    $(".actGotop").click(function () {
      $("html,body").stop().animate({ scrollTop: 0 }, 1000);
    });

整体代码如下：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    body {
      height: 8000px;
    }

    a {
      color: #FFF;
    }

    .actGotop {
      position: fixed;
      bottom: 50px;
      right: 50px;
      width: 150px;
      height: 195px;
      display: none;
      z-index: 100;
    }

    .actGotop a,
    .actGotop a:link {
      width: 150px;
      height: 195px;
      display: inline-block;
      background: url(images/gotop.png) no-repeat;
      outline: none;
    }

    .actGotop a:hover {
      width: 150px;
      height: 195px;
      background: url(images/gotop.gif) no-repeat;
      outline: none;
    }
  </style>


</head>

<body>
  <!-- 返回顶部小火箭 -->
  <div class="actGotop"><a href="javascript:;" title="Top"></a></div>


  <script src="jquery-1.12.4.js"></script>
  <script>


    $(function () {
      //当页面超出1000px的时候，让小火箭显示，如果小于1000px，则隐藏
      $(window).scroll(function () {
        if ($(window).scrollTop() >= 1000) {
          $(".actGotop").stop().fadeIn(500);
        } else {
          $(".actGotop").stop().fadeOut(500);
        }
      })
    });

    //在外面注册
    $(".actGotop").click(function () {
      $("html,body").stop().animate({ scrollTop: 0 }, 1000);
      //scrollTop为0
      // $(window).scrollTop(0);
    });
  </script>
</body>

</html>

本站文章为3672js教程网友分享投稿，版权归原作者，欢迎任何形式的转载，但请务必注明出处。同时文章内容如有侵犯了您的权益，请联系我们处理。