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

本文介绍了网页滚动的四种常见方法:通过a标签跳转锚点、使用window.scrollTo方法、调整scrollTop属性以及利用scrollIntoView方法。这些技术帮助开发者实现页面定位、滚动至指定位置以及元素自动滚动到视口。请注意,scrollIntoView方法在某些浏览器中可能存在兼容性问题。
摘要由CSDN通过智能技术生成

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
感谢阅读,希望能帮到您

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

老电影故事

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值