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


相关推荐

  • 安卓framework面试题(高级Android面试题)

    Framework面试题 Android 系统基础 JVM、Dalvik和ART是什么以及他们的关系 01 Binder机制 02 系统级app和第三方应用级app分别在什么目录下?system/priva-app和system/app目录的权限有什么…

    2022年4月16日
    37
  • eclispe中创建maven项目使用spring报java.lang.ClassNotFoundException: org.springframework.web.filter.Charact「建议收藏」

    eclispe中创建maven项目使用spring报java.lang.ClassNotFoundException: org.springframework.web.filter.Charact「建议收藏」报错如下:信息: Starting Servlet Engine: Apache Tomcat/7.0.57九月 24, 2018 6:44:04 下午 org.apache.catalina.util.SessionIdGenerator createSecureRandom信息: Creation of SecureRandom instance for session ID gen…

    2022年6月13日
    39
  • 前端调用rpc接口_api接口调用

    前端调用rpc接口_api接口调用问题背景需要根据id通过rpc调用查询具体信息,因为没有提供批量查询的接口,所以做法是挨个遍历查询,那意味着:如果有100个id,就需要顺序进行100次rpc调用,假设每次rpc接口的调用时间是50ms(这个速度很快了),那单单rpc调用就要占用5s,所以接口的响应会非常慢。下面进行优化。优化方案:方案一:让服务方提供批量查询接口,需要服务提供方配合,这里暂不采用。方案二:rpc服务的调用由顺序调用修改为并行调用,采用线程池实现rpc的并发调用。具体实现如下:1)创建线程的类public

    2022年10月11日
    0
  • python对字符串中指定字符进行替换[通俗易懂]

    python对字符串中指定字符进行替换[通俗易懂](1)替换指定的所有字符:string.replace(‘a’,‘b’)表示将字符串string中所有字符为’a’的替换为’b’。例子string=”abcabcabc”string=string.replace(‘a’,’b’)print(string)输出bbcbbcbbc(2)替换指定位置i的字符为字符s:列表化字符串再以字符串形式输出例子i,s…

    2022年6月7日
    48
  • 深入理解halcon相机标定[通俗易懂]

    深入理解halcon相机标定[通俗易懂]目录相机标定简介深度说明1、相机标定参数介绍2、标定板详细介绍问题1:halcon是否只能使用halcon专用的标定板?问题2:halcon标定板如何生成?问题3:halcon标定板如何摆放,拍照数量有无限制?标定步骤1、设置相机内部初始值使用set_calib_data_cam_param算子设置相机内部初始值畸变类型选择与参数确定技巧2、标定板初始化3、创建标定数据模型4、获取标定图片5、使…

    2022年5月28日
    379
  • nginx解决前端跨域问题_ajax跨域请求cors

    nginx解决前端跨域问题_ajax跨域请求cors通过Nginx模块HttpHeadersModule来添加Access-Control-Allow-Origin允许的地址。在Nginx的conf目录下修改nginx.conf,添加以下代码location~*\.(eot|ttf|woff|svg|otf)${add_headerAccess-Control-Allow-Origin*;}//eot|tt

    2022年8月24日
    3

发表回复

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

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