html中的scrolltop是啥意思

Posted 2023-03-14

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了html中的scrolltop是啥意思相关的知识，希望对你有一定的参考价值。

我看到好多滚动层页面中总是有一个scrolltop属性，请问这个是做什么用的。实例如下：最好解释一下这段代码，怎么可以把浮动层的位置设置到页面两边呢？谢谢了! 中国站长天空-网页特效-CSS特效-始终在页面固定位置的层右下...

scrolltop是jQuery中的一个方法，它可以设置 <div> 元素中滚动条的垂直偏移量，基本的用法是：

scrollTop() 方法返回或设置匹配元素的滚动条的垂直位置。

scroll top offset 指的是滚动条相对于其顶部的偏移。

如果该方法未设置参数，则返回以像素计的相对滚动条顶部的偏移。

工具原料：jQuery、编辑器、浏览器

1、在一个有内容的div中是吸纳设置滚动条的偏移量和获取偏移量的值，代码如下：

<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function()
  $(".btn1").click(function()
    $("div").scrollTop(100);
  );
  $(".btn2").click(function()
    alert($("div").scrollTop()+" px");
  );
);
</script>
</head>
<body>
<div 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.
</div>
<button class="btn1">把 scroll top offset 设置为 100px</button>
<br />
<button class="btn2">获得 scroll top offset</button>
</body>
</html>

2、运行的效果如下：