返回页面顶部

返回页面顶部

• 在一些网站中可以看到一些回到页面顶部的按钮，下面用三种方法实现这一功能

方法一

• 锚点法
• 当a标签的href为#时，点击a，就会返回页面的顶部

<div class="box"></div>
<a href="#">backTop</a>

.box{
width: 300px;
height: 3000px;
}
a{
position: fixed;
bottom:50px;
right:50px;
}

方法二

• H5的新特性 scrollIntoView()

<!--当布尔值为false时，会到达页面的地步-->
scrollIntoView(false) 
<!--当布尔值为true时，会到达页面的顶部-->
scrollIntoView(true)

• HTML

<div class="box">
    <button onclick="backTop()">backTop</button>
</div>

• CSS

.box{
width: 300px;
height: 3000px;
}
button{
position: fixed;
bottom:50px;
right:50px;
}

• JavaScript

 let body = document.getElementsByTagName('body')[0];
function backTop(){
  body.scrollIntoView(true)
}

方法三

• scrollTop
• HTML和CSS同方法二
• JavaScript

let body = document.getElementsByTagName('body')[0];
function backTop(){
  body.scrollTop = 0
}