1.通过a标签滚动到对应锚点
点我滚动到目标
我是目标我是目标
2.通过window.scrollTo方法滚动
//scrollTo两个参数分别表示显示的x y坐标位置
//document.documentElement.scrollHeight 获取的是整个文档的高度
//滚动到页面底部
window.scrollTo(0, document.documentElement.scrollHeight)
3.通过scrollTop 滚动:元素滚动条内的顶部隐藏部分的高度。 这个属性可读可写。为0 滚动到顶部 ,给一个超过内容的高度 会滚动到底部。
//回到文档顶部
document.documentElement.scrollTop = 0;
//回到文档底部
document.documentElement.scrollTop = 99999;
4.元素的scrollIntoView()方法让当前的元素滚动到浏览器窗口的可视区域内
//获取目标元素
let element = document.getElementById(id);
//在vue中也可以使用ref
let element = this.$refs.refname;
//元素方法调用
element.scrollIntoView()
scrollIntoView的兼容性还是有点问题,一些版本的浏览只是部分支持: