美文网首页
回到顶部

回到顶部

作者: 王远清orz | 来源:发表于2019-11-29 10:10 被阅读0次
    <head lang="en">
        <meta charset="UTF-8">
        <title></title>
        <link rel="stylesheet" href="css/main.css">
    </head>
    <body>
      <div id="wrap">
          <div id="top" class="header" data-reactid=".0.0">
              <div class="wrapper clearfix" data-reactid=".0.0.0"><a class="logo" href="/p/index.html" data-reactid=".0.0.0.0"></a>
                  <div class="search-box" data-reactid=".0.0.0.1"><input type="text" value="" data-reactid=".0.0.0.1.0">
                          <div class="search-btn" data-reactid=".0.0.0.1.1"></div>
                          <div class="hot-words" data-reactid=".0.0.0.1.2"><a data-reactid=".0.0.0.1.2.$0">趣味测试</a><a data-reactid=".0.0.0.1.2.$1">魁拔</a><a data-reactid=".0.0.0.1.2.$2">迪丽热巴</a>
                              <a
                                  data-reactid=".0.0.0.1.2.$3">吴亦凡</a><a data-reactid=".0.0.0.1.2.$4">鹿晗</a></div>
                      </div>
                      <div class="user-wrapper" data-reactid=".0.0.0.2">
                          <div class="login-wrap" data-reactid=".0.0.0.2.0"><a class="btn-login" href="javascript:void(0)" data-reactid=".0.0.0.2.0.0">登录</a></div>
                      </div>
                      <div class="links" data-reactid=".0.0.0.3">
                          <div class="slide-down-container admin-links" data-reactid=".0.0.0.3.1">
                              <div class="title" data-reactid=".0.0.0.3.1.0"><span data-reactid=".0.0.0.3.1.0.0"></span><span class="title-span" data-reactid=".0.0.0.3.1.0.1">部落管理</span>
                                  <i
                                      class="slide-down-icon" data-reactid=".0.0.0.3.1.0.2"></i>
                              </div>
                              <ul class="slide-down-content" data-reactid=".0.0.0.3.1.1">
                                  <li data-reactid=".0.0.0.3.1.1.$=10"><a target="_blank" href="/buluoadmin/home.html" data-reactid=".0.0.0.3.1.1.$=10.0">运营平台</a></li>
                                  <li
                                      data-reactid=".0.0.0.3.1.1.$=11"><a target="_blank" href="/apply.html" data-reactid=".0.0.0.3.1.1.$=11.0">创建部落</a></li>
                              </ul>
                          </div>
                          <div class="slide-down-container help-links" data-reactid=".0.0.0.3.2">
                              <div class="title" data-reactid=".0.0.0.3.2.0"><span data-reactid=".0.0.0.3.2.0.0"></span><span class="title-span" data-reactid=".0.0.0.3.2.0.1">帮助</span>
                                  <i
                                      class="slide-down-icon" data-reactid=".0.0.0.3.2.0.2"></i>
                              </div>
                              <ul class="slide-down-content" data-reactid=".0.0.0.3.2.1">
                                  <li data-reactid=".0.0.0.3.2.1.$=10"><a target="_blank" href="/tribe.html" data-reactid=".0.0.0.3.2.1.$=10.0">部落简介</a></li>
                                  <li data-reactid=".0.0.0.3.2.1.$=11"><a target="_blank" href="http://kf.qq.com/product/buluo.html" data-reactid=".0.0.0.3.2.1.$=11.0">帮助中心</a></li>
                              </ul>
                          </div>
                      </div>
                  </div>
          </div>
          <div class="cls" id="content">
              <img src="images/content.png" width="100%">
          </div>
          <!-- http://buluo.qq.com/p/detail.html?bid=17266&pid=9498777-1455945612&from=grp_sub_obj -->
      </div>
      <div class="to-top" id="totop"></div>
      <script src="js/common.js"></script>
      <script src="js/index.js"></script>
    <script>
    // 获取元素
    var wrap = my$('wrap');
    var bodyTop = my$('top');
    var content = my$('content');
    var toTop = my$('totop');
    
    // 1.当文本内容滚动大于10,top高度减小,totop显示
    window.onscroll = function() {
      // 获取滚动出去内容的高度  scrollTop   存在兼容
      // var scrollTop = document.body.scrollTop;
      // var scrollTop = document.documentElement.scrollTop;
    
      var scrollTop = getScroll().scrollTop;
      if (scrollTop > 10) {
        // top是window对象的属性,是只读属性,这里不能使用top做变量
        bodyTop.classList.add('fixed');
        toTop.style.display = 'block';
      }else{
        bodyTop.classList.remove('fixed');
        toTop.style.display = 'none';
      }
    };
    // 2.当点击totop时,页面滚动到最顶部,top恢复
    // 使用定时器
    var timeId = null;
    toTop.onclick = function() {
      // 如果正在执行
      if (timeId) {
        clearInterval(timeId);
        timeId = null;
      }
      timeId = setInterval(function() {
        // 设置步径
        var step = 10;
        // 设置目标位置,回到顶部,所以目标位置是0
        var target = 0;
        // 设置当前位置,当前位置应该是滚动出去的高度
        var current = getScroll().scrollTop;
    
        // 如果当前位置大于目标位置,step应该为负数
        if (target < current) {
          step = -Math.abs(step);
        }
        // 如果当前位置 - 目标位置的值小于步径,停止定时器 ,让当前位置等于,目标位置
        if (Math.abs(current - target) < Math.abs(step)) {
          clearInterval(timeId);
          current = target;
          document.body.scrollTop = current;
          document.documentElement.scrollTop = current;
          return;
        }
        // 否则执行
        current += step;
        document.body.scrollTop = current;
        document.documentElement.scrollTop = current;
      }, 5);
    };
    
    </script>
    </body>
    
    

    相关文章

      网友评论

          本文标题:回到顶部

          本文链接:https://www.haomeiwen.com/subject/iwywwctx.html