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

相关推荐

  • IGMP协议原理与配置[通俗易懂]

    IGMP协议原理与配置[通俗易懂]组播通信中,发送者将组播数据数据发送到特定的组播地址。

    2022年9月14日
  • linux awk 数组,shell数组和awk数组

    linux awk 数组,shell数组和awk数组awk终于能入门了,所以整理了该文章,内容大多来自网上。一、bash支持一维数组(不支持多维数组),没有限定数组的大小。在shell中,用括号来表示数组,数组元素用空格符号分割开。类似于C语言,数组元素的下标由0开始编号。获取数组中的元素要利用下标,下标可以是整数或算术表达式,其值应大于或等于01.定义数组数组名array,元素abc[root@localhost~]#array=(ab…

    2022年7月19日
  • c++深拷贝和浅拷贝[通俗易懂]

    c++深拷贝和浅拷贝[通俗易懂]C++中类的拷贝有两种:深拷贝,浅拷贝当出现类的等号赋值时,会调用拷贝函数在未定义显示拷贝构造函数的情况下,系统会调用默认的拷贝函数——即浅拷贝,它能够完成成员的一一复制。当数据成员中没有指针时,浅拷贝是可行的。但当数据成员中有指针时,如果采用简单的浅拷贝,则两类中的两个指针将指向同一个地址,当对象快结束时,会调用两次析构函数,而导致指针悬挂现象。所以,这时,必须采用深拷贝。深拷贝与浅拷贝

    2022年10月1日
  • oracle锁表怎么处理_锁表如何解决办法

    oracle锁表怎么处理_锁表如何解决办法ORACLE锁表如何处理看哪个表锁住了SELECTB.OWNER,B.OBJECT_NAME,A.SESSION_ID,A.LOCKED_MODEFROMV$LOCKED_OBJECTA,DBA_OBJECTSBWHEREB.OBJECT_ID=A.OBJECT_ID;执行sqlselect*fromv$sessiont1,v$lock…

    2022年8月23日
  • nodejs搭建MQTT服务器

    nodejs搭建MQTT服务器前言mqtt协议介绍一mqtt协议介绍二图片来自https://www.jianshu.com/p/9e74287e3b07正文安装nodejs下载安装即可。安装mqtt.js模块新建一个文件夹,打开cmd,npminstallmqtt–save,这里很有可能能会报错,百度一下就可以解决。安装好mqtt.js模块后,文件夹中会多两个文件出来。搭建服务器mqttser…

    2022年5月27日
  • 中文按字母排序_怎么按首字母顺序排

    中文按字母排序_怎么按首字母顺序排        项目中用到前端排序,自己写了一个实现,给大家分享一下。      存在的问题:很多时候是用汉字的首拼来比较,但汉字转拼音在前端实现是个问题,主要表现在两个地方1、字符库里的数据量没有覆盖所有汉字,2、多音字问题(注:这里都是说简体汉字)。      实现思路:1、从网上找了一个汉字转拼音的库,能转大部分汉字(多音字也没处理);2、写一个字符比较的函数;3、调用Array里的…

    2022年10月12日

发表回复

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

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