乐趣区

关于javascript:这几种方法帮你快速实现回到页面顶部

jiezi

背景介绍

当页面内容很多的时候，用户可能会始终往下滑动页面。然而当他想返回页面顶部进行其余操作时，他可能须要一直滚动鼠标滚轮，这就导致用户体验将很差。鉴于这种状况，“回到顶部”这一性能便呈现了。

现在在咱们浏览网站的时候，经常能遇见“回到顶部”这个按钮。目前支流的回到页面顶局部体现为两种，一种是间接回到页面的顶部，这种形式简略粗犷；另外一种则是主动滚动间接回到页面顶部，这样一来视觉体验上可能更好，然而用户须要过几秒能力看到顶部内容。

例如掘金，在滚动到肯定高度时会呈现“回到顶部”按钮，点击后会间接回到页面顶部，就是上文说到的第一种状况。

实现

动态显示滚动按钮

“回到顶部”并不是始终显示的，而是滚动到肯定值才呈现的，因而应该在 window.onscroll 里定义一个判断事件。

window.onscroll = function () {
  var currentHeight =
    document.documentElement.scrollTop ||
    window.pageYOffset ||
    document.body.scrollTop;
  // 页面滚动超过 300px 就显示
  if (currentHeight > 300) {document.getElementById('backtop').style.display = 'block'
  } else {document.getElementById('backtop').style.display = 'none'
  }
}

间接回到顶部

锚点

最简略的办法。给顶部的 div 一个 id，点击间接回到这个 div 元素，然而 URL 上会呈现 #top。

<div id="top"></div>
......
<a href="#top"> 回到顶部 </a>

scrollTo 函数

管制滚动条回到指定地位，第一个参数是间隔页面左端的间隔，第二个参数是间隔页面顶部的间隔。

<a href="javascript:scrollTo(0, 0)"> 回到顶部 </a>

scrollTop 函数

管制滚动条垂直偏移。

<a onclick="byScrollTop()"> 回到顶部 </a>
......
function byScrollTop() {
  document.documentElement.scrollTop = 0;
  window.pageYOffset = 0; // 兼容 ios
  document.body.scrollTop = 0; // 兼容低版本 ie
}

scrollBy 函数

该办法可把内容滚动指定的像素数。第一个参数指向右滚动的像素，第二个参数指向下滚动的参数，正数可使方向相同。

<a onclick="byScrollBy()"> 回到顶部 </a>
......
function byScrollBy() {
  var topHeight =
    document.documentElement.scrollTop ||
    window.pageYOffset ||
    document.body.scrollTop;
  scrollBy(0, -topHeight);
}

间接回到顶部

定时器实现滚动动画

通过定时器实现固定速度的主动滚动动画成果。然而这样会有个问题，就是当页面内容非常多的时候，这个时候离顶部曾经有很长一段距离了。如果还是一个固定速度的话，可能会长达 10 秒钟，这对用户体验来说是不敌对的。

<a onclick="scrollToTop()"> 回到顶部 </a>
......
function scrollToTop() {
  var topHeight =
    document.documentElement.scrollTop ||
    window.pageYOffset ||
    document.body.scrollTop;
  scrollBy(0, -100);
  // 模仿鼠标向上滚动事件
  scrolldelay = setTimeout('scrollToTop()', 50);
  // 革除滚动事件，防止无奈向下挪动
  if (topHeight === 0) {clearTimeout(scrolldelay);
    scrolldelay = null;
  }
}

定时器实现滚动动画 - 改良版

基于下面这个问题，咱们能够设置一个速度的最小值，让滚动速度从快到慢，但也不至于过慢。

function scrollToTop() {
  var topHeight =
    document.documentElement.scrollTop ||
    window.pageYOffset ||
    document.body.scrollTop;
  var speed = topHeight / 10 > 100 ? topHeight / 10 : 100;
  scrollBy(0, -speed);
  // 模仿鼠标向上滚动事件
  scrolldelay = setTimeout('scrollToTop()', 50);
  // 革除滚动事件，防止无奈向下挪动
  if (topHeight === 0) {clearTimeout(scrolldelay);
    scrolldelay = null;
  }
}

最终成果

残缺代码 

<style>
    a {display: block;}

    #top {
        height: 2000px;
        background-color: #999
    }

    #backtop {
        display: none;
        position: fixed;
        bottom: 20px;
        right: 30px;
        background-color: #fff;
        z-index: 9;
    }
</style>

<body>
    <div id="top">
        这里是页面顶部
    </div>
    <div id="backtop">
        <a href="#top"> 回到顶部 - 锚点 </a>
        <a href="javascript:scrollTo(0, 0)"> 回到顶部 -scrollTo 函数 </a>
        <a onclick="byScrollTop()"> 回到顶部 -scrollTop 函数 </a>
        <a onclick="byScrollBy()"> 回到顶部 -scrollBy 函数 </a>
        <a onclick="scrollToTop()"> 回到顶部 - 定时器动画版 </a>
    </div>
    <script>
        window.onscroll = function () {
            var currentHeight =
                document.documentElement.scrollTop ||
                window.pageYOffset ||
                document.body.scrollTop;
            console.log(currentHeight, "currentHeight");
            if (currentHeight > 300) {document.getElementById('backtop').style.display = 'block'
            } else {document.getElementById('backtop').style.display = 'none'
            }
        }

        function byScrollTop() {
            document.documentElement.scrollTop = 0;
            window.pageYOffset = 0; // 兼容 ios
            document.body.scrollTop = 0; // 兼容低版本 ie
        }

        function byScrollBy() {
            var topHeight =
                document.documentElement.scrollTop ||
                window.pageYOffset ||
                document.body.scrollTop;
            scrollBy(0, -topHeight);
        }

        function scrollToTop() {
            var topHeight =
                document.documentElement.scrollTop ||
                window.pageYOffset ||
                document.body.scrollTop;
            var speed = topHeight / 10 > 100 ? topHeight / 10 : 100;
            scrollBy(0, -speed);
            // 模仿鼠标向上滚动事件
            scrolldelay = setTimeout('scrollToTop()', 50);
            // 革除滚动事件，防止无奈向下挪动
            if (topHeight === 0) {clearTimeout(scrolldelay);
                scrolldelay = null;
            }
        }
    </script>
</body>
退出移动版