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)
上一篇 2022年7月12日 下午1:00
下一篇 2022年7月12日 下午1:16


相关推荐

  • 白盒测试用例设计方法有哪些_软件测试语句覆盖测试用例

    白盒测试用例设计方法有哪些_软件测试语句覆盖测试用例白盒测试设计方法编写:天林问题:白盒测试方法的概念及应用场景白盒测试方法用各种逻辑覆盖法来和设计白盒测试用例使用基本路径法来设计白盒测试用例内容:白盒测试的基本介绍白盒测试用例设计方法静态设计方法动态设计方法一、白盒测试的概念及特点1、什么是白盒测试代码逻辑的测试白盒测试,又称结构测试、逻辑驱动测试或基于程序代码内部构成的测试。此时,测试工程师需深入考察程序代码的内部结构、逻辑设计等。对于白盒测试工程师来说,软件产品内部构成是透明的。下列代码是

    2022年10月12日
    4
  • phpstorm激活码2021【注册码】

    phpstorm激活码2021【注册码】,https://javaforall.net/100143.html。详细ieda激活码不妨到全栈程序员必看教程网一起来了解一下吧!

    2022年3月19日
    33
  • Kerberos安装及集成hdfs、hive

    Kerberos安装及集成hdfs、hive环境 1 台 Centos6 5 主机部署 masterKDC2 台 Centos6 5 主机部署 KerberosClie Master 主机安装 Kerberosyumi serverkrb5 libskrb5 workstation y1 1 配置 kdc confvim var kerberos krb5kdc kdc conf kdcde

    2026年3月18日
    2
  • 从入门到精通:Nano-Banana平铺图生成保姆级教程

    从入门到精通:Nano-Banana平铺图生成保姆级教程

    2026年3月13日
    2
  • Linux中top命令_linux tail命令详解

    Linux中top命令_linux tail命令详解原标题:Linux下top命令详解1、简介top命令是Linux下常用的性能分析工具,能够实时显示系统中各个进程的资源占用状况,类似于Windows的任务管理器。top显示系统当前的进程和其他状况,是一个动态显示过程,可以自动或者通过用户按键来不断刷新当前状态。如果在前台执行该命令,它将独占前台,直到用户终止该程序为止.。比较准确的说,top命令提供了实时的对系统处理器的状态监控,显示系统中CPU…

    2026年3月8日
    7
  • SqlServer中Datetime和SmallDateTime如何选择?

    SqlServer中Datetime和SmallDateTime如何选择?datetime占8字节,精度3.33毫秒,时间从1753.1.1到9999.12.31smalldatetime占4字节,精度1分钟,时间从1900.1.1到2079.6.6如果需要用到“秒”,毫无疑问选择datetime!

    2022年5月16日
    43

发表回复

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

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