JQ滚动条自动定位

莫笑皮皮猪

已于 2023-10-07 16:43:00 修改

阅读量340

点赞数

分类专栏：随笔文章标签：前端 javascript css

于 2023-05-11 13:53:38 首次发布

本文链接：https://blog.youkuaiyun.com/m0_60380883/article/details/130619994

版权

随笔专栏收录该内容

10 篇文章

订阅专栏

这段代码演示了如何在具有滚动条的页面列表中定位到指定的DOM元素。首先，它找到下标为i的.mark类元素，然后计算该元素与页面顶部的距离，接着获取第一个元素的相同距离。最后，使用animate方法平滑地调整#commentItemDiv的滚动条位置，使其焦点移动到目标元素。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

//获取到下标为i的DOM元素
let commentItemDiv = $('#commentItemDiv').find('.mark').eq(i);
//获取i元素到页面顶部距离
let commentItemDivTop = $(commentItemDiv).offset().top;
//获取第一个元素到页面顶部距离
let firstCommentItemDivTop = $($('#commentItemDiv').find('.mark').eq(0)).offset().top;
//定位这个元素(定位`'#commentItemDiv'`中滚动条的位置)
//scrollTop为进度条位置
$('#commentItemDiv').animate({
   scrollTop: commentItemDivTop-firstCommentItemDivTop
}, 500);

上面情景为在页面中的列表，有滚动条，然后要定位他的位置