页面回到顶部的几种方法

回到顶部的五种方法

一、锚点跳转

说明：为a标签的href属性可以链接id属性实现页内跳转，为顶部元素设置一个id属性即可。

代码如下：

<div class="header" id="header">
        这是顶部
</div>
<div class="btn"> <a href="#header">回到顶部</a></div>
<div class="footer">
    这是页脚
</div>

二、element.scrollTop

说明：element.scrollTop返回当前视图中的实际元素顶部边缘与顶部边缘的距离，即当前显示element被浏览器挡住部分的高度，设置为0就可以回到顶部。

代码如下：

<div class="header" id="header">
   这是顶部
</div>
<div class="btn"> <a href="#">回到顶部</a></div>
<div class="footer">
   这是页脚
</div>
<script>
   document.getElementsByClassName('btn')[0].onclick = function () {
       document.body.scrollTop = document.documentElement.scrollTop = 0;
   }
</script>

三、window.scrollTo

说明：把内容滚到指定坐标，参数x(必须)，指定的x坐标，参数与y(必须)，指定的y坐标，设置window.scrollTo(0,0)可以回到顶部。

代码如下：

<div class="header" id="header">
    这是顶部
</div>
<div class="btn"> <a href="javascript:;">回到顶部</a></div>
<div class="footer">
    这是页脚
</div>
<script>
    document.getElementsByClassName('btn')[0].onclick = function () {
        // document.body.scrollTop = document.documentElement.scrollTop = 0;
        window.scrollTo(0,0)
    }
</script>  

四、window.scrollBy()

说明：可把内容滚动指定的像素数；参数，xnum(必选)，把文档向右滚动的像素数，ynum(必选)，把文档向下滚动的像素数。只需把ynum设为负数，即可回到顶部。

代码如下：

<div class="header" id="header">
这是顶部
</div>
<div class="btn"> <a href="javascript:;">回到顶部</a></div>
<div class="footer">
    这是页脚
</div>
<script>
 document.getElementsByClassName('btn')[0].onclick = function () {
     // document.body.scrollTop = document.documentElement.scrollTop = 0;
     // window.scrollTo(0,0)
     var top = document.body.scrollTop || document.documentElement.scrollTop
     window.scrollBy(0,-top)
 }
</script> 

五、element.scrollIntoView()

说明：让当前的元素滚动到浏览器窗口的可视区域内。参数，Boolean（可选，默认为true），为true时，元素的顶端将和其所在滚动区的可视区域的顶端对齐；为false时，元素的底端将和其所在滚动区的可视区域的底端对齐。

代码如下：

<div class="header" id="header">
    这是顶部
</div>
<div class="btn"> <a href="javascript:;">回到顶部</a></div>
<div class="footer">
    这是页脚
</div>
<script>
    document.getElementsByClassName('btn')[0].onclick = function () {
        // document.body.scrollTop = document.documentElement.scrollTop = 0;
        // window.scrollTo(0,0)
        // var top = document.body.scrollTop || document.documentElement.scrollTop
        // window.scrollBy(0,-top)
        document.getElementById('header').scrollIntoView()
    }
</script>