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)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • java线程池 面试题(精简)

    java线程池 面试题(精简)什么是线程池?线程池是一种多线程处理形式,处理过程中将任务提交到线程池,任务的执行交由线程池来管理。如果每个请求都创建一个线程去处理,那么服务器的资源很快就会被耗尽,使用线程池可以减少创建和销毁线程的次数,每个工作线程都可以被重复利用,可执行多个任务。 为什么要使用线程池?创建线程和销毁线程的花销是比较大的,这些时间有可能比处理业务的时间还要长。这样频繁的创建线程和销毁线程,再…

    2022年6月13日
    40
  • J2ME开发环境部署!「建议收藏」

    J2ME开发环境部署!「建议收藏」一、准备工作我作为一名使用Eclipse开发Java程序的开发人员,学习开发J2ME程序当然还是要使用我最爱的Eclipse啦。Eclipse目前最新的版本是EclipseSDK3.1。你可以在

    2022年7月4日
    23
  • 打赏图片,怎么在csdn上上传图片,并添加到自定义栏目中[通俗易懂]

    打赏图片,怎么在csdn上上传图片,并添加到自定义栏目中[通俗易懂]打赏图片,怎么在csdn上上传图片,并添加到自定义栏目中

    2022年4月23日
    32
  • contextConfigLocation加载「建议收藏」

    contextConfigLocation加载「建议收藏」&lt;context-param&gt; &lt;param-name&gt;contextConfigLocation&lt;/param-name&gt; &lt;param-value&gt; classpath:applicationContext.xml &lt;/param-value&gt;&lt;/context-param&gt;只加载类路径下的ap…

    2022年6月15日
    29
  • Android之viewstub用法详解及实现延迟加载

    这一篇是接着上面的include标签的例子来讲的,地址http://blog.csdn.net/jason0539/article/details/26131831 上一篇的布局中间就用了viewstub这个控件,现在来说一下其作用和用法” ViewStub 是一个不可见的,大小为0的View,最佳用途就是实现View的延迟加载,避免资源浪费,在需要的时候才加载View”需

    2022年3月11日
    74
  • PyTorch 中的数据类型 torch.utils.data.DataLoader

    PyTorch 中的数据类型 torch.utils.data.DataLoaderDataLoader是PyTorch中的一种数据类型。在PyTorch中训练模型经常要使用它,那么该数据结构长什么样子,如何生成这样的数据类型?下面就研究一下:先看看 dataloader.py脚本是怎么写的(VS中按F12跳转到该脚本) __init__(构造函数)中的几个重要的属性:1、dataset:(数据类型dataset)输入的数据类型。看名字感觉就像是数据库,…

    2022年5月20日
    92

发表回复

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

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