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

1.通过a标签滚动到对应锚点

<a href="#target">点我滚动到目标</a>
 
<div id="target">我是目标我是目标</div>
 
<!-- 注:这样会在地址栏中加上hash值 #target -->

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

over
感谢阅读,希望能帮到您

你可能感兴趣的:(JavaScript,前端,javascript,vue.js)