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>

 

上一篇:微信公众号input把页面推上去不返回解决方案


下一篇:h5 穿透滚动