通常一个完整的页面可包含多屏内容，因此我们常需要通过滚动页面来阅读网页上的内容。页面上有一些可点击的链接或按钮，点击后调转到页面指定的位置，今天介绍几种实现方式。
这是我参与8月更文挑战的第20天，活动详情查看：
8月更文挑战
纯html实现（锚点）
一般包含两块：
<a href="#anchorName">点击跳转当前页面指定锚点</a>
<a name="anchorName">name锚定物</a>
<p id="anchorName">id锚定物</p>
效果：当点击第一个a标签时，页面的顶端会滚动到后面a标签的位置。特点是：滚动过程没有缓冲效果，体验一般，而且url里会添加"#anchorName"。这在SPA应用里是可能会污染路由。所以原生的方式可能不是最佳的处理方式，当然优点是比较简单。
js辅助（window.scrollTo方法）
window.scrollTo(options)
options:{
left:number,
top:number,
behavior:"smooth"|"instant"
来个需求：点击按钮将某元素滚动到屏幕的上方。
分析有以下几步：
先获取该元素到文档顶部的距离，offsetTop返回当前元素相对于其 offsetParent 元素的顶部的距离。
通过递归循环的方式累加来获取距离文档最顶部的距离
具体实现代码如下：
function heightToTop(ele){
let root = document.body;
let height = 0;
height += ele.offsetTop;
ele = ele.offsetParent;
}while( ele !== root )
return height;
someBtn.addEventListener('click',function(e){
window.scrollTo({
top:heightToTop(e.target),
behavior:'smooth'
注意：window.scrollTo只能改变最外层容器的滚动距离。如果你页面上潜逃了一个div，该div有自己的滚动距离，则不会受到影响。
scrollTop属性
通过设置scrollTop属性来直接更改容器的滚动距离。
设置最外层可滚动容器的滚动距离：document.documentElement.scrollTop = 100
当页面最外层的滚动容器潜逃有滚动容器时：HTMLElement.scrollTop = 100
someBtn.addEventListener('click',function(e){
const heightToTop = heightToTop(e.target);
document.documentElement.scrollTop = heightToTop;
最后，感谢阅读！
