使用js控制页面滚动位置的几种方法

最新推荐文章于 2024-03-17 22:14:49 发布
最新推荐文章于 2024-03-17 22:14:49 发布
阅读量1.6w 收藏 24
点赞数 5
分类专栏： web 文章标签： javascript 开发语言 ecmascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hhyzbc/article/details/126442275
版权

第一种方法： 

window.scrollTo(x-coord,y-coord )
  • x-coord 是文档中的横轴坐标。
  • y-coord 是文档中的纵轴坐标。

更多详细内容

Window.scrollTo() - Web API 接口参考 | MDN (mozilla.org)icon-default.png?t=M7J4https://developer.mozilla.org/zh-CN/docs/Web/API/Window/scrollTo第二种方法

document.getElementById(`idname`).scrollIntoView()

表示让id为idname的元素显示在页面之中，也实现了，有滚动的情况，滚动条会滚动到相应位置

Element.scrollIntoView() - Web API 接口参考 | MDN (mozilla.org)icon-default.png?t=M7J4https://developer.mozilla.org/zh-CN/docs/Web/API/Element/scrollIntoView第三种方法

document.documentElement.scrollTop = 0;

使用scrollTop属性表示将文档元素高度为0.。

Element.scrollTop - Web API 接口参考 | MDN (mozilla.org)icon-default.png?t=M7J4https://developer.mozilla.org/zh-CN/docs/Web/API/Element/scrollTop

HHYZBC
关注
  • 5
    点赞
  • 踩
  • 24
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 2
    评论
专栏目录
js将滚动条滚动到指定位置的方法
weixin_30318645的博客
08-28 4614
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><met...
js/html实现滚动到顶部底部某个指定位置
09-20
js/html实现滚动到顶部 底部 某个指定位置 简单易懂上来就能使用
js控制滚动条置底
m0_56354910的博客
12-22 526
【代码】js控制滚动条置底。
JS垂直以及横向滚动条精确定位居中某一元素
最新发布
2401_83621384的博客
03-17 475
推荐一些系统学习的途径和方法。每个Web开发人员必备，很权威很齐全的Web开发文档。作为学习辞典使用，可以查询到每个概念、方法、属性的详细解释，注意使用英文关键字搜索。里面的一些 HTML，CSS，HTTP 技术教程也相当不错。开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
页面滚动到指定位置——js中scrollIntoView()的用法
yehaocheng520的博客
05-23 1万+
页面滚动到指定位置——js中scrollIntoView()的用法
js：锚点滚动到页面对应区域
weixin_44384273的博客
01-18 658
scrollIntoView
javascript滚动到顶部scrollTop用法
热门推荐
weixin_50367873的博客
04-14 2万+
首先了解下列相关属性 网页可见区域宽： document.body.clientWidth; 网页可见区域高： document.body.clientHeight; 网页可见区域宽： document.body.offsetWidth (包括边线的宽); 网页可见区域高： document.body.offsetHeight (包括边线的宽); 网页正文全文宽： document.body.scrollWidth; 网页正文全文高： document.body.scrollHeight; 网页被卷去的高：
JS控制滚动条的位置
asx54321的博客
11-03 99
转载▼http://blog.sina.com.cn/s/blog_4481a3460100rwwu.html JS控制滚动条的位置：window.scrollTo(x,y); 竖向滚动条置顶(window.scrollTo(0,0);竖向滚动条置底 window.scrollTo(0,document.body.scrollHeight) JS控制Text...
js滚动到指定位置
weixin_30768175的博客
12-27 726
序言：在网络上百度，关键字：“js div滚动到指定位置”，结果基本上大同小异！各种大神都给我们总结出来了四种滚动到指定位置的办法，可惜再下愚钝，每个都不会用，所以写了一个超级简单的方法来使初学者一看就懂，我们可以用逻辑来代替一部分技术！这里我们只用到一个属性就可以达到要求，其他根据自己的逻辑判断即可！获取到你最外层的div的id，然后获取属性scrollTop，然后想好逻辑，给scroll...
JS控制滚动条位置
林中明月间丶
03-09 3656
【代码】JS控制滚动条位置。
js控制div内的滚动条的位置
weixin_43422861的博客
08-23 1460
<body> //d1是外层div，带滚动条 <div id='d1' style='height:200px;width:100px;overflow:auto;background:blue;'> <div style='height:500px;width:500px;background:yellow'>2222</div> </div> </body> <script> document
JS实现随页面滚动显示/隐藏窗口固定位置元素
10-22
窗口固定位置显示元素，当页面高度大于某高度，并且页面向下滚动时，显示该元素；当页面位置小于某高度，或者页面向上滚动时，隐藏该元素，下面通过本文给大家介绍JS实现随页面滚动显示/隐藏窗口固定位置元素，需要的朋友参考下吧
python中selenium操作下拉滚动条的几种方法汇总
01-01
UI自动化中经常会遇到元素识别不到，找不到的问题，原因有很多，比如不在iframe里，xpath或id写错了等等；但有一种是在当前显示的页面元素不可见，拖动下拉条后元素就出来了。 比如下面这样一个网页，需要进行拖动下拉条后才能通过selenium找到密码输入框的元素， 在python中有几种方法解决这种问题，简单介绍下，给需要的人： 方法一）使用js脚本直接操作，方法如下： js=var q=document.getElementById('id').scrollTop=10000 driver.execute_script(js） 或： js=var q=document.do
js实现鼠标滑动到某个div禁止滚动
10-14
主要为大家详细介绍了js实现鼠标滑动到某个div禁止滚动，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
js控制滚动条的位置
12-27
js控制滚动条的位置
JavaScript控制网页平滑滚动到指定元素位置的方法
12-11
本文实例讲述了JavaScript控制网页平滑滚动到指定元素位置的方法。分享给大家供大家参考。具体如下： function elementPosition(obj) { var curleft = 0, curtop = 0; if (obj.offsetParent) { curleft = obj.offsetLeft; curtop = obj.offsetTop; while (obj = obj.offsetParent) { curleft += obj.offsetLeft; curtop += obj.offsetTop; }
禁止弹窗中蒙层底部页面跟随滚动的几种方法
08-28
我们大家在做弹出层的时候，必不可少的一个元素就是蒙层，也就是遮罩层，当弹出层滚动的时候，蒙层底部的页面一般是要求固定不动的，所以这篇文章就来给大家介绍了如何禁止弹窗中蒙层底部页面跟随滚动的几种方法，...
js监听html页面的上下滚动事件方法
10-18
今天小编就为大家分享一篇js监听html页面的上下滚动事件方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
JS关闭窗口或JS关闭页面的几种代码分享
10-26
介绍了JS关闭窗口或JS关闭页面的几种代码，有需要的朋友可以参考一下
使用nuxt的时候打开一个新的页面回退之后页面滚动
06-07
如果您在使用Nuxt时遇到了打开一个新页面后回退页面滚动的问题，可以尝试以下方法进行解决： 1. 在页面组件的`mounted`钩子函数中手动记录当前页面的滚动位置，例如： ``` mounted() { window.scrollTo(0, this.$store.state.scrollPosition) } ``` 2. 在页面组件的`beforeRouteLeave`钩子函数中手动记录当前页面的滚动位置，例如： ``` beforeRouteLeave(to, from, next) { this.$store.commit('updateScrollPosition', window.scrollY) next() } ``` 3. 在Nuxt的配置文件`nuxt.config.js`中添加以下配置，禁用页面滚动恢复功能： ``` export default { // ... router: { scrollBehavior: () => ({ x: 0, y: 0 }), // 禁用页面滚动恢复功能 // 如果您需要页面滚动恢复功能，请不要添加此配置 stateKey: 'no-scroll' }, // ... } ``` 以上是解决Nuxt打开新页面回退后页面滚动的几种方法，您可以根据实际情况选择合适的方法进行解决。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

HHYZBC

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

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

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

打赏作者

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

抵扣说明：

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

余额充值