jquery div内容滚动到指定的ID位置.

最新推荐文章于 2023-06-08 14:25:35 发布

hljqfl

最新推荐文章于 2023-06-08 14:25:35 发布

阅读量2.8k

点赞数

CC 4.0 BY-SA版权

分类专栏： JS-CSS

本文链接：https://blog.youkuaiyun.com/hljqfl/article/details/85677516

JS-CSS 专栏收录该内容

20 篇文章

订阅专栏

本文通过一个具体的HTML页面示例，展示了如何使用jQuery来获取滚动条的位置，包括滚动条顶部偏移量的计算方法。文章深入讲解了如何利用jQuery选择器和offset、scrollTop方法来定位元素，并实现页面内滚动到特定元素的功能。

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

<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $(".btn1").click(function(){
    //alert($("#div").scrollTop()+" px");
    alert($("#d2").offset().top+$("#div").scrollTop()+" px");
    //alert($("#d2").offset().top - $("#div").offset().top + $("#div").scrollTop()+" px");
    $("#div").scrollTop($("#d2").offset().top - $("#div").offset().top + $("#div").scrollTop() );
  });
});
</script>
</head>
<body>
<div style="height:60px;">xxx</div>
<div id="div" style="border:1px solid black;width:200px;height:200px;overflow:auto">
This is some text.<br><div id="d1">1</div> This is some text. This is some text. This is some text. This is some text. This is some text.<div id="d2">2</div> This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text.<br><div id="d3">3</div>This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. <div id="d4">4</div>This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. <br><div id="d5">5</div>This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text.
</div>
<button class="btn1">获得 scrollbar top offset</button>
<p>试着移动滚动条，然后再次点击按钮。</p>
</body>
</html>