scrollTop,scrollHeight例子

最新推荐文章于 2026-02-09 15:16:36 发布

原创最新推荐文章于 2026-02-09 15:16:36 发布 · 821 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

JS-CSS

本文介绍了一个使用jQuery操作div元素滚动条位置的例子，通过点击按钮可以设置或获取div元素的scrollTop偏移量，展示了如何在网页中实现平滑滚动效果。

<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $(".btn1").click(function(){
    $("div").scrollTop(100);
    //$("div").scrollTop(document.getElementById("d1").scrollHeight);//jq没有scrollHeight
  });
  $(".btn2").click(function(){
    //alert($("div").scrollTop()+" px + " + $("div").height()+" px + " + document.getElementById("d1").scrollHeight);
    alert(document.getElementById("d1").scrollTop+" px + " + $("div").height()+" px + " + document.getElementById("d1").scrollHeight);
  });
});
</script>
</head>
<body>
<div id="d1" style="border:1px solid black;width:200px;height:200px;overflow:auto">
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. 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. 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. 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.efertretretert
</div>
<button class="btn1">把 scroll top offset 设置为 100px</button>
<br />
<button class="btn2">获得 scroll top offset</button>
</body>
</html>