Div 滚动条滚动到指定的位置[通俗易懂]

Div 滚动条滚动到指定的位置[通俗易懂]控制DIV滚动滚动条条滚动到指定的位置

大家好,又见面了,我是你们的朋友全栈君。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<script type="text/javascript" src="resource/jquery-1.9.1.min.js"></script>
</head>
<script type="text/javascript">
$(function(){
 //  $("#container").scrollTop($("#test5").scrollHeight ()); 不行
 
 $("#container").scrollTop($("#test4").offset().top)
   
});
</script>
<body style="text-align:center">


<!--
var div = document.getElementById('divDetail'); 


div.scrollTop = div.scrollHeight;  -->


   <div id="container" style="width:430px;height:300px;background:#00FF00;overflow:auto">
       <div  id="test1" style="width:400px;height:300px;background:#FFFFFF">
  </div>
        <div  id="test2" style="width:400px;height:300px;background:#000000">
  </div>
  <div  id="test3" style="width:400px;height:300px;background:#00FF00">
  </div>
  <div  id="test4" style="width:400px;height:300px;background:#0000FF">
  </div>
  <div  id="test5" style="width:400px;height:300px;background:#FFFF00">
  </div>
   </div>
</body>
</html>

评论如下:

       $(“#container”).scrollTop($(“#test4”).position().top + $(“#container”).scrollTop()) 

注意position和offset方法的区别。另外#container和#test4都需要设置定位方式,比如position:relative.

两个方法的定义。
offset():
获取匹配元素在当前视口的相对偏移。
返回的对象包含两个整形属性:top 和 left。此方法只对可见元素有效。
position():
获取匹配元素相对父元素的偏移。

返回的对象包含两个整形属性:top 和 left。为精确计算结果,请在补白、边框和填充属性上使用像素单位。此方法只对可见元素有效。

  详情访问:http://www.jb51.net/article/18340.htm

IE8 下,亲测可用

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请联系我们举报,一经查实,本站将立刻删除。

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/158014.html原文链接:https://javaforall.net

(0)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • PXE启动原理以及与普通Linux启动的对比

    PXE启动原理以及与普通Linux启动的对比关于PXE部署的详细配置的文章已经有不少了,这篇文章主要讲一下PXE启动的原理以及PXE启动和普通Linux启动的对比。

    2022年6月29日
    23
  • 在java中print和println_JAVA命令行参数

    在java中print和println_JAVA命令行参数Java中的PrintWriter类的println()方法用于中断流中的行。此方法不接受任何参数或返回任何值。用法:publicvoidprintln()参数:此方法不接受任何参数。返回:此方法不返回任何值。下面的方法说明了println()方法的用法方式:示例1://Javaprogramtodemonstrate//PrintWriterprintln()methodimp…

    2022年9月1日
    0
  • python教程 — 廖雪峰

    python教程 — 廖雪峰复习 python 知识点 python 语言缺点 运行速度慢 和 C 程序相比非常慢 因为 Python 是解释型语言 你的代码在执行时会一行一行地翻译成 CPU 能理解的机器码 这个翻译过程非常耗时 所以很慢 而 C 程序是运行前直接编译成 CPU 能执行的机器码 所以非常快 代码不能加密 如果要发布你的 Python 程序 实际上就是发布源代码 这一点跟 C 语言不同 C 语言不用发布源代码 只需要把编译后的机器码 也就是你在 Windows 上常见的 xxx exe 文件 发布出去 要从机器码反推出 C 代码是不可能的 所以 凡是编译型的语

    2025年7月26日
    0
  • JDK卸载和彻底删除

    JDK卸载和彻底删除第一步:点击“控制面板”。第二步:点击“卸载程序”。第三步:进入到“程序和功能”界面,找到jdk的两个程序:①java8update171(64-bit);②javaSEDevelopmentKit8update171(64-bit);右击卸载即可第四步:在“运行”中输入Regedit,打开注册表编辑器,找到HKEY_LOCAL_MACHINE/SOFTWARE/JavaSo…

    2022年6月30日
    39
  • centos nmtui(centos7 nmtui配置)

    一般步骤:先编辑后激活,一步都不能少使用nmtui可以为新网卡添加连接,然后进行ip配置,也可以对已经存在且使用的网卡进行ip的直接设置…

    2022年4月16日
    40
  • 渗透之——使用reaver傻瓜式破解wifi之利用路由器WPS漏洞

    渗透之——使用reaver傻瓜式破解wifi之利用路由器WPS漏洞跟这篇破解教程一样,网上破解教程多是基于路由器的WPS漏洞破解,但是这样的路由器只占少数。一般wifi是依据WPA/WPA2加密的,因此想要破解一般的wifi,还得破解这个协议,虽然近期这个协议也被破解了,不过也是很不容易的。刚入门破解,不是很熟悉,在网上找各种破解资料,终于破解成功了临近工作室的wifi,沾沾自喜~本文破解wifi针对一些路由器的WPS(Wi-fiprotectedset…

    2022年5月16日
    50

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号