前端页面滚动到某个位置的方式

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的兼容性还是有点问题,一些版本的浏览只是部分支持:

前端页面滚动到某个位置的方式_第1张图片

 

你可能感兴趣的:(JavaScript)