JS滚动到指定元素位置

最新推荐文章于 2024-04-17 11:59:13 发布
最新推荐文章于 2024-04-17 11:59:13 发布
阅读量2.7k 收藏 1
点赞数
CC 4.0 BY-SA版权
文章标签： javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_42617840/article/details/127960032 
var $wrapper = $('#wrapper');     // 父级容器
var $target = $('#target');    // 目标元素
$wrapper.scrollTop($target.offset().top - $wrapper.offset().top + $wrapper.scrollTop())
// 目标元素与视口的距离 - 父级容器与视口的距离 + 当前滚动条的位置

溪雪
关注
js滚动到指定位置
weixin_30768175的博客
12-27 886
序言：在网络上百度，关键字：“js div滚动到指定位置”，结果基本上大同小异！各种大神都给我们总结出来了四种滚动到指定位置的办法，可惜再下愚钝，每个都不会用，所以写了一个超级简单的方法来使初学者一看就懂，我们可以用逻辑来代替一部分技术！这里我们只用到一个属性就可以达到要求，其他根据自己的逻辑判断即可！获取到你最外层的div的id，然后获取属性scrollTop，然后想好逻辑，给scroll...
jq \ js控制页面滚动到指定位置
weixin_56383764的博客
06-11 1515
通过jQuery、JavaScript随意控制页面滚动条的位置
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; }
js如何設置滾動到元素位置
前端路上坎坎坷坷，总有一天站在顶峰仰望世界！！！
04-17 2937
在JavaScript中，你可以使用方法或元素的方法来设置滚动位置。这些方法允许你将页面滚动到特定的坐标或元素。
JS原生滚动到指定元素
ymzhao
05-04 1万+
Element.scrollTo()、Element.scrollIntoView()、Element.focus()
JavaScript 滚动页面到指定元素位置
热门推荐
陈小峰（iefreer）的专栏
07-17 8万+
页面评论功能，当评论较多时，有时需要滚动到评论头部。可以使用scrollTop方法，加上一点延时动画（animate），可访问在线演示，代码大体如下： $(document).ready(function (){ $("#scroll").click(function (){ $('html, body')
js将滚动条滚动到指定位置的简单实现方法
10-22
总结一下，JavaScript实现滚动条滚动到指定位置主要依赖于`window.location.hash`、`document.getElementById().scrollIntoView()`或`window.scrollTo()`等方法。这些技术的应用可以丰富网页的交互性，提升用户体验...
elementUI滚动条,点击dom元素滚动到指定位置.pdf
12-16
ElementUI 滚动条点击 DOM 元素滚动到指定位置的实现细节需要考虑多个方面，包括滚动条的状态、事件处理函数和动画效果。通过使用 ElementUI 的滚动条组件和 Vue.js 的 Composition API，我们可以快速实现滚动条的...
jQuery实现点击滚动到指定元素上的方法分析
11-20
在网页交互设计中，有时我们需要实现用户点击一个链接或按钮后，页面自动滚动到特定的元素位置。jQuery 提供了一种简单易用的方法来实现这一功能。本文将深入解析如何利用 jQuery 实现点击滚动到指定元素上的技术。 ...
js滚动条滚动到指定元素
GeniusXYT的博客
03-04 9593
this.$nextTick(() => { let item = document.getElementById("card-item"); // 指定的元素 let wrapper = item.parentElement.parentElement; // 其父元素 - 必须是产生滚动条的元素 // el.focus(); // 元素聚焦法定位 ， 有时定位不全， 可用 outline:none; 除去聚焦产生的框; 对于默认没有聚焦的元素需要主动
js/html实现滚动到顶部底部某个指定位置
09-20
js/html实现滚动到顶部 底部 某个指定位置 简单易懂上来就能使用
js实现滚动条滚动到某个位置便自动定位某个tr
01-19
要实现带滚动条的table，定位到某个tr，其实是很简单的，只有几行js代码就可以完成，具体内容如下 js代码 <strong>[removed] function test(){ var $objTr = $(#location); //找到要定位的地方 tr $objTr.css(background-color,lightgray); //设置要定位地方的css var objTr = $objTr[0]; //转化为dom对象 $(#dataDiv).animate({scrollTop:objTr.of
JS滚动到元素的指定位置
￠虾咪┆℡ 的博客
01-20 438
如果是input元素 直接使用 document.querySelector('#ExtendApplyOrder').focus(); 非Input元素 tabindex必须要添加 <div id="ShoppingCartListIndex" tabindex="0"></div> document.querySelector('#ShoppingCartListIndex').focus();
js使页面滚动到特定元素上
weixin_57768308的博客
03-06 2820
使用Element.scrollIntoView()方法
页面滚动到指定位置——js中scrollIntoView()的用法
yehaocheng520的博客
05-23 1万+
页面滚动到指定位置——js中scrollIntoView()的用法
js滚动到页面指定位置
赛朋博客 2077
01-09 621
代码 let requestAnimFrame = (function () { return ( window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || function (callback) { window.setTimeout(callback, 1000 / 60) } ) })()
js页面滚动，设置锚点，控制页面滚动到某个节点位置
qq_38719039的博客
10-17 5473
页面滚动，设置锚点
uni-app 滚动到指定元素位置
最新发布
07-03
<think>在UniApp中滚动到指定元素位置，可以使用`uni.createSelectorQuery()`获取元素位置，然后通过 `scroll-view`的 `scrollTop`或 `scrollLeft`属性实现滚动。注意：如果使用页面滚动（即不使用scroll-view），则需使用 `uni.pageScrollTo`。这里提供两种场景的解决方案：场景一：使用 scroll-view滚动到指定元素（适用于局部滚动区域）场景二：使用页面滚动到指定元素（适用于整个页面滚动）下面分别给出代码示例： ###场景一：scroll-view内滚动到指定元素步骤：1.在 scroll-view上设置scroll-top或scroll-left属性（竖向滚动用scroll-top，横向用scroll-left）2.使用`uni.createSelectorQuery()`获取目标元素在scroll-view内的相对位置3.计算滚动距离并赋值注意：在微信小程序中，需要将selectorQuery的作用域设置为当前组件（使用`in(this)`） ```vue<template><view><scroll-viewscroll-y:scroll-top="scrollTop"class="scroll-view"@scroll="scroll"><viewv-for="itemin list":key="item.id":id="'item'+item.id"class="item">元素{{item.id}}</view></scroll-view><button @click="scrollToElement(50)">滚动到第50个元素</button></view> </template><script> exportdefault {data() {return{scrollTop:0,list: Array.from({length:100}, (_, i) =>({ id: i+1 }))}},methods: {scrollToElement(index){//获取目标元素的位置uni.createSelectorQuery().in(this).select(`#item${index}`).boundingClientRect(rect =>{if (rect){//计算滚动距离 =目标元素距离顶部的位置- scroll-view的偏移（如果有）//这里因为scroll-view内元素是连续的，所以直接使用目标元素的上边界位置this.scrollTop =rect.top;}}).exec();},scroll(e){//如果需要，可以记录当前的滚动位置}} }</script> <style>.scroll-view {height:400px;border:1px solid#ccc; }.item{height:60px;line-height:60px;border-bottom:1px solid#eee; }</style> ```注意：在微信小程序中，直接设置 scrollTop可能不会生效，因为滚动视图有缓存机制。可以尝试先设置一个非目标值再设置目标值（如先加1再减1）来触发。###场景二：页面滚动到指定元素（整个页面滚动）使用 `uni.pageScrollTo` API可以滚动页面到指定元素。```vue<template><view><viewv-for="item inlist":key="item.id":id="'item'+item.id"class="item">元素{{item.id}}</view><button @click="scrollToElement(50)">滚动到第50个元素</button></view></template> <script>export default{data(){return {list: Array.from({length:100}, (_, i) =>({ id: i+1 }))}},methods:{scrollToElement(index) {uni.pageScrollTo({selector:`#item${index}`,duration:300, //滚动动画时长offsetTop:0//可设置偏移量，比如顶部有固定导航栏时，需要减去导航栏高度});}}} </script><style> .item {height:60px;line-height:60px;border-bottom:1pxsolid #eee;} </style>``` **注意事项：**1.使用`uni.pageScrollTo`时，目标元素必须是在页面中（不能是局部滚动区域内的元素）。2.在微信小程序中，使用`selector`选择器时，注意元素 id不能以数字开头（所以上面示例使用`item`前缀）。3.如果页面有自定义导航栏或固定元素，可能需要设置 `offsetTop`来调整滚动位置。 **两种方案对比：** -scroll-view：适用于局部滚动区域，需要自己计算滚动位置，并且在小程序中可能有兼容性问题（需要特殊处理）。- pageScrollTo：适用于整个页面的滚动，简单方便，但无法用于局部滚动区域。根据实际需求选择合适的方式。 §§相关问题§§1.在scroll-view中滚动到指定元素时，如何解决微信小程序中设置scrollTop不生效的问题？ 2.使用uni.pageScrollTo时，如何计算固定导航栏的高度并设置offsetTop？3.如何实现滚动到指定元素时带有平滑的动画效果？4.如果目标元素是动态生成的，如何确保在滚动前元素已经渲染完成？5.在scroll-view中，如何同时处理横向和竖向滚动到指定元素？</think>### 在 UniApp 中滚动到指定元素位置 在 UniApp 中实现滚动到指定元素位置，主要有两种常用方法： #### 方法一：使用 `uni.pageScrollTo`（适用于页面级滚动） ```vue <template> <view> <button @click="scrollToElement('targetElement')">滚动到目标元素</button> <!-- 内容区域 --> <view class="content"> <view v-for="item in 50" :key="item">列表项 {{ item }}</view> </view> <!-- 目标元素 --> <view id="targetElement" class="target"> 目标位置 </view> </view> </template> <script> export default { methods: { scrollToElement(elementId) { uni.pageScrollTo({ selector: `#${elementId}`, duration: 300, // 滚动动画时间（ms） offsetTop: 50, // 距离顶部的偏移量 complete: () => { console.log('滚动完成'); } }); } } } </script> <style> .content view { height: 100rpx; line-height: 100rpx; border-bottom: 1rpx solid #eee; } .target { height: 200rpx; background-color: #f0ad4e; color: white; text-align: center; line-height: 200rpx; margin-top: 20rpx; } </style> ``` #### 方法二：使用 `scroll-view` 组件（适用于局部滚动区域） ```vue <template> <scroll-view scroll-y :scroll-top="scrollTop" class="scroll-container" > <view v-for="item in 50" :key="item">列表项 {{ item }}</view> <view id="targetElement" class="target">目标位置</view> </scroll-view> <button @click="scrollToTarget">滚动到目标元素</button> </template> <script> export default { data() { return { scrollTop: 0, targetPosition: 0 }; }, mounted() { // 预先计算目标位置 this.calculateTargetPosition(); }, methods: { calculateTargetPosition() { const query = uni.createSelectorQuery().in(this); query.select('#targetElement').boundingClientRect(data => { this.targetPosition = data.top; }).exec(); }, scrollToTarget() { this.scrollTop = this.targetPosition; // 微信小程序兼容处理 // #ifdef MP-WEIXIN this.$nextTick(() => { this.scrollTop = this.targetPosition + 1; setTimeout(() => { this.scrollTop = this.targetPosition; }, 50); }); // #endif } } } </script> <style> .scroll-container { height: 500rpx; border: 1rpx solid #ccc; } </style> ``` ### 关键点说明 1. **两种滚动方式区别**： - `pageScrollTo`：适用于整个页面滚动 - `scroll-view`：适用于容器内局部滚动 2. **定位元素**： - 使用 `id` 属性标识目标元素 - 通过 `uni.createSelectorQuery()` 获取元素位置 3. **平台兼容性**： - 微信小程序需要特殊处理滚动位置刷新 - H5 和 App 端无需额外处理 4. **滚动参数**： - `duration`：控制滚动动画时长 - `offsetTop`：设置距离顶部的偏移量 - `complete`：滚动完成回调函数 5. **性能优化**： - 提前计算目标位置（避免每次滚动都查询） - 使用节流防止频繁滚动 ### 常见问题解决方案 1. **元素未渲染导致定位失败**： ```javascript // 在数据加载完成后定位 this.$nextTick(() => { this.scrollToElement('target'); }); ``` 2. **动态内容定位**： ```javascript // 监听数据变化后重新计算位置 watch: { listData() { this.$nextTick(this.calculateTargetPosition); } } ``` 3. **导航栏适配**： ```javascript // 获取导航栏高度作为偏移量 const systemInfo = uni.getSystemInfoSync(); const navHeight = systemInfo.statusBarHeight + 44; uni.pageScrollTo({ selector: '#target', offsetTop: navHeight }); ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值