美文网首页
回到顶部

回到顶部

作者: 王远清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>

相关文章

  • js 返回页面顶部(动画)

    js 返回到页面顶部,含有渐变或者动画效果 点击返回顶部按钮,页面逐渐向上回到顶部: js 返回到页面顶部,直接返...

  • 回到顶部

    经过百度与stackoverflow4年前还有很多quirks模式的时候 原因是这样的 Firefox & IE...

  • 回到顶部

    首先来下简易的css和html布局 其中图片: 接下来js 这个时候我们console.log(ispeed),发...

  • 回到顶部

  • 回到顶部

    首先提到回到顶部我们就想到的是a标签锚点跳转 a标签返回顶部的话会产生改变路由的问题每次用户点击返回顶部的话是可以...

  • 回到顶部

  • 回到顶部

    方法1 方法2

  • 回到顶部

  • 回到顶部

    toTop(){ let timer = null; cancelAnimationFrame(timer);...

  • RecyclerView滑动监听

    RecyclerView一键回到顶部 布局 设置一键回到顶部按钮的点击事件 设置回到顶部按钮的显示隐藏 方式1: ...

网友评论

      本文标题:回到顶部

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