某个滚动盒子，指定某子元素滚动到顶部

最新推荐文章于 2024-05-15 15:34:10 发布
最新推荐文章于 2024-05-15 15:34:10 发布
阅读量2.7k 收藏 1
点赞数
分类专栏： JavaScript 文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_38334525/article/details/108597479
版权

使用案例
在这里插入图片描述
使选中的节点，始终处于顶部位置

document.getElementById("xxx").scrollTo(0,document.getElementById("子节点id").offsetTop)

document.getElementById(“xxx”) 是含有滚动条的一个元素盒子
document.getElementById(“子节点id”)是该元素盒子的可滚动的子元素，通过.offsetTop可以获取前元素相对于其offsetParent元素的顶部内边距的距离。(具体注意事项请访问offsetTop)

offsetParent 返回一个指向最近的（指包含层级上的最近）包含该元素的定位元素或者最近的 table,td,th,body元素。但是请确保该父元素没有style.display 为 "none" ，或者该元素的 style.position 被设为 "fixed"，则该属性返回 null

默默地写代码
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
js实现页面滚动返回顶部
60rzvvbj的博客
07-31 7611
许多网站的右下角都有一个可以使页面返回顶部的按钮 例如这些网站： 返回顶部我们可以用锚点链接来实现，但是锚点链接它突然闪到页面顶部有点不太好看 如果页面是滚动着回到顶部的话会好看很多 那么，开始今天的正题 #前面是拆解着讲的，不想看可以直接跳过，带注释的完整版代码在后面 先搞几个盒子和一个用来添加点击事件的按钮 <div>模块1</div> <div>模块2</div> <div>模块3</div> <div>模块4
js实现盒子拖拽动画效果
10-14
1. **事件监听器**：首先，我们通过`querySelector`选择类名为"wrap"的元素，然后为它的`.head`子元素添加`onmousedown`事件监听器。当鼠标按钮被按下时，这个监听器会被触发。 2. **计算初始坐标**：在`...
scrollIntoView和scrollTo方法实现滚动到指定元素的位置
最新发布
this__valve的博客
05-15 454
scrollIntoView和scrollTo
点击按钮将指定盒子至于顶部(实现滚动效果)
qq_41429765的博客
04-11 751
首先通过数组的遍历，给标签设置name的值，通过此name获取此标签的offsetTop //点击此将a标签置于盒子顶部 <div @click="selectType('a')">按钮</div> //我是a标签 <div name='a'>a</div> methods:{ selectType(val){ let zhi=document.getElementByName(val); //注意如果位置滚...
将元素移动到页面顶部vue3示例（scrollIntoView方法）
weixin_50961467的博客
05-07 631
当传入参数true时，相当于{behavior: ‘auto’, block: ‘start’, inline: ‘nearest’}当未传入参数时，默认值为：{behavior: ‘auto’, block: ‘start’, inline: ‘nearest’}tab.scrollIntoView（）;注：如果元素未能完全在视口内，则根据最短滚动距离原则，垂直方向滚动父级容器，使元素完全在视口内。注：如果元素未能完全在视口内，则根据最短滚动距离原则，水平方向滚动父级容器，使元素完全在视口内。
【前端学习】 浏览器滚动
qq_38211443的博客
09-26 568
设置全局滚动条高度 1.window.scrollTo(0,0) 滚动到页面顶部 window.scrollTo(x,y) 滚动到页面指定位置 2.window.scrollBy(x,y) 相对滚动 3.scrollTop来设置 document.scrollingElement.scrollTop = 0; scrollTo()和scrollBy()的区别：scrollTo()是指...
jQuery和JavaScript和vue让子盒子滚动到父盒子的指定位置，包括设置scrollTop到指定位置的值为rem
weixin_44784401的博客
03-07 3191
jQuery和JavaScript和vue让子盒子滚动到父盒子的指定位置，包括设置scrollTop到指定位置的值为rem
Vue 指定元素滚动条滚到顶部
gdgztt的专栏
12-22 538
Vue 指定元素滚动条滚到顶部
使某个dom元素匀速滑动到容器顶部
haosicx的博客
07-31 434
这个函数接受3个参数。
Selenium中JS处理滚动条
joviality_valentine的博客
03-25 499
一、JS处理滚动条问题 1、滚动条回到顶部： js="var q=document.getElementById('id').scrollTop=0" driver.execute_script(js） 或者 js="var q=document.documentElement.scrollTop=0" driver.execute_script(js) 2、滚动条拉到底部： js...
CSS子元素跟父元素的高度一致的实现方法
11-19
这样，子元素`.right`的高度会自动扩展到与父元素`.parent`相同，因为`bottom: 0`与`top: 0`结合，使得元素从顶部到底部占据整个空间。 3. **处理高度超出的子元素**： 如果子元素`.right`内部有一个高度超出父...
弄懂CSS盒子模式 DIV布局详解（不容错过）（带源码）
02-21
这段代码创建了一个弹性容器`.container`，其中的`.item`子元素将按比例分配宽度，实现响应式布局。 对于CSS+div布局，还需要理解定位（positioning）。常见的定位属性有`static`（默认值，遵循常规文档流）、`...
js实现橱窗展示效果
10-15
在示例代码中，我们用`getElementById`方法获取了ID为"box"的父元素，以及其内部的两个子元素：顶部的商品容器（box_top）和底部的滚动条容器（box_bottom）。滚动条容器中还有一个子元素，即滚动条本身（mask）。...
css如何固定table第一行CSS面试知识点总结三.docx
07-08
对于内联元素，不论如何设置`line-height`，最终父元素的高度由子元素中数值最大的`line-height`决定。值得注意的是，每个内联元素都包含在一个无形的“行框盒子”中，这个盒子前面还有一个宽度为0的“幽灵空白节点...
[489]selenium的一些js操作
周小董
01-09 923
控制滚动条高度 1.滚动条回到顶部： js="var q=document.getElementById('id').scrollTop=0" driver.execute_script(js） 2.滚动条拉到底部 js="var q=document.documentElement.scrollTop=10000" driver.execute_script(js) 3.这里可以修改scr...
ajax获取输入框的值_Python+selenium自动化之元素属性获取
weixin_39534978的博客
11-21 122
本篇文章主要分享如何获取元素属性的方法，其实在之前的文章中也有用到，本篇汇总一下方便自己学习和回顾。案例还是以腾讯企业邮箱为例。获取元素文本获取元素文本是比较常用到的，如在邮箱登录页，获取“同时支持企业微信和微信扫码”的文本，这种可以看到的文本可以使用driver.text获取该内容。查看元素属性：同时支持企业微信和微信扫码获取title浏览器title的获取很直接，driver.title获取t...
点击按钮页面缓动滚动到顶部
weixin_53577099的博客
09-08 214
点击按钮页面缓动滚动到顶部
JavaScript中的scrollTop（js中的scrollTop，滚动到顶部，javascript滚动到顶部）
热门推荐
weixin_65793170的博客
03-30 1万+
scrollTop是JavaScript中一个非常有用且重要的方法，它用于获取或设置元素的垂直滚动条位置，实现各种滚动相关的功能，无论是回到顶部、滚动到指定位置还是监听滚动事件，都需要用到scrollTop，在本文中，我们将深入了解scrollTop的用法和实际应用，这是一张scrollTop的关系图，仅供参考
Element.scrollIntoView()的应用
dengkangning1111的博客
04-15 978
Element.scrollIntoView(object) 方法让当前的元素滚动到浏览器窗口的可视区域内 参数为 { behavior: "auto" | "instant" | "smooth", block: "start" | "end", } <!DOCTYPE html> <html lang="en"> <head&gt...
滚动到某个元素 并且在顶部
06-12
要实现滚动到某个元素并且把该元素置于页面顶部，可以结合使用 `uni.createSelectorQuery()` 和 `uni.pageScrollTo()` 方法。 具体实现步骤如下： 1. 在页面中给要滚动到的元素设置一个唯一的 `id`。 ``` <template> <view> <view id="target">我是要滚动到的元素</view> <button @click="scrollToTarget">滚动到目标元素</button> <!-- 页面内容 --> </view> </template> ``` 2. 在按钮的点击事件中，使用 `uni.createSelectorQuery()` 方法获取目标元素的位置信息。 ``` <script> export default { methods: { scrollToTarget() { uni.createSelectorQuery() .select('#target') .boundingClientRect(rect => { // rect 就是目标元素的位置信息 console.log(rect) }) .exec() } } } </script> ``` 3. 在 `boundingClientRect` 的回调函数中，可以获取到目标元素的位置信息，包括 `top`、`left`、`width`、`height` 等属性。其中 `top` 表示元素顶部距离页面顶部的距离。 4. 使用 `uni.pageScrollTo()` 方法将页面滚动到目标元素的位置，并将目标元素置于页面顶部。 ``` <script> export default { methods: { scrollToTarget() { uni.createSelectorQuery() .select('#target') .boundingClientRect(rect => { uni.pageScrollTo({ scrollTop: rect.top, // 滚动到目标元素的位置 duration: 300 // 滚动动画时间，单位为 ms }) }) .exec() } } } </script> ``` 在 `uni.pageScrollTo()` 方法中，将 `scrollTop` 参数设置为目标元素的 `top` 值即可将目标元素置于页面顶部。注意，`scrollTop` 的单位是 px。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值