点击页面的“回到顶部”按钮，页面滚动到顶部的几种方法
一、使用锚点
1）使用默认链接锚点，设置a链接的href属性值为"#top"即可实现
<div><a href=" ">返回顶部</a ></div>
2）href指向特定的id
<div id=“element1”>元素1</div>
<a href=“#element1”>回到元素1</a >
二、scrollTop属性:
元素未滚动时，scrollTop的值为0，如果元素被垂直滚动了，scrollTop的值大于0，且表示元素上方不可见内容的像素宽度
document.body.scrollTop = document.documentElement.scrollTop = 0
三、scrollTo(0,0)方法: 参数为坐标点，（x,y）—坐标点
坐标x和y指定的点位于显示区域的左上角
四、scrollBy(dx,dy)方法：参数为距离 dx—表示水平距离，dy-表示垂直距离
var top = document.body.scrollTop || document.documentElement.scrollTop
scrollBy(0,-top)
HTML 控件的属性：offsetTop. offsetLeft. offsetWidth. offsetHeight
body不属于HTML控件
obj.offsetTop —指 obj 距离上方或上层控件（父级）的位置，整型，单位像素。
obj.offsetLeft —-指 obj 距离左方或上层控件（父级）的位置，整型，单位像素。
obj.offsetWidth 指 obj 控件自身的宽度，整型，单位像素—包括边框、滚动条、可视区域
obj.offsetHeight 指 obj 控件自身的高度，整型，单位像素—包括边框、滚动条、可视区域
offsetTop与style.top、offsetLeft 与 style.left、offsetWidth 与 style.width、offsetHeight 与 style.height 的区别
1）offsetTop 返回的是数字并且带px单位，而 style.top 返回的是字符串
2）offsetTop 只读，而 style.top 可读写
3）如果没有给 HTML 元素指定过 top 样式，则 style.top 返回的是空字符串
clientHeight、clientWidth、clientLeft、clientTop—-body和HTMl控件都有该属性
clientHeight——内容可视区域的高度，也就是说页面浏览器中可以看到内容的这个区域的高度，一般是最后一个工具条以下到状态栏以上的这个区域，与页面内容无关，也就是除了滚动条的高度和边框的高度，剩下的高度就是可视区域的高度
clientWidth——内容可视区域的宽度
clientLeft———-可认为为左边框的长度
Clienttop--------可认为为上边框的长度
scrollLeft、scrollTop、scrollHeight、scrollWidth
scrollLeft————左边卷起来的宽度
scrollTop-———-上边卷起来的高度
scrollHeight———内部元素的绝对高度，包含内部元素的隐藏的部分
scrollWidth———-内部元素的绝对宽度，包含内部元素的隐藏部分
1、可以设置元素滚动的效果：
1）scrollLeft—设置/获取元素水平向右滚动的距离
比如：页面有多个tab项，页面初始化成功，让其自动滚动到最后一个tab项，而最后一项超过页面最大宽度，被遮挡住了，这时候需要设置scrollLeft，达到滚动效果
获取视口元素的宽度：this.$refs.timeTab.offsetWidth
保存每一个tab项相对于视口左边距离：
position = 0
给每一个tab项设置宽度：itemWidth
for (let i = 0; i < this.dynamicTabList.length; i++) {
this.offset[i] = (i - position) * this.itemWidth
}
当元素宽度超出容器宽度设置scrollLeft 的值才生效，否则一直为0
2）scrollTop—设置/获取元素向下滚动的距离
当点击某个tab项，页面滚动到具体的content区域
当元素高度超出视口高度的时候，设置scrollTop的值才生效，否则一直为0
当页面向下滚动到一定距离的时候，显示“回到顶部”文案，点击该文案，回到页面顶部
参考文章：https://blog.csdn.net/zh_rey/article/details/78967174
栗子：页面初始化成功，让其自动定位到特定的tab项，利用scrollLeft实现水平方向滚动
比如：tab状态有“已开抢，抢购中，即将开抢”
效果：页面初始化成功之后，自动滑动到“抢购中”状态的tab项
scrollLeft可以设置滚动效果
元素需要设置overflow，并且不能为visibility
并且需要改元素的宽度超过父元素的宽度，才能给this.$refs.tabDiv.scrollLeft赋值成功，否则一直为0，赋值不成功
比如：tab的数据是通过接口拿到的，这时候需要在this.$nextTick(() => {})在这个方法里面调用设置scrollLeft的方法，就可以实现滑动效果
使用scrollTop的问题
如果页面有input textarea框，页面底部有按钮，在输入框聚焦的时候，点击按钮，本意触发按钮事件，但是会先触发input的失焦事件，如果此时在失焦事件里面，给页面设置scrollTop值，这样就会导致按钮在页面的位置发生变化，这样就不会触发按钮的事件了
Input的失焦事件会比按钮的点击事件先触发