滚动条定位

来源：互联网发布：淘宝宝贝卖点模板编辑：程序博客网时间：2024/04/30 14:16

首先来一个例子：

<html>  <head>  <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.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>

上述例子的链接：http://www.w3school.com.cn/tiy/t.asp?f=jquery_css_scrolltop_set
注：滚动条所在的div必须有overflow属性且value不能为hidden

请看复杂情况：

这种情况主要用于使用了滚动条插件的情况，一眼看去不知道那个div在滚动，随意找一个div是不能正常工作的。
如果想加入一点动画效果，可以适应animate方法

var scrollTop = 100;$(".form").parent().parent().animate("scrollTop: "+ scrollTop +"'px'", 400);

从form向上找两个parent就是带有overflow属性的滚动条所在的容器

0 0