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 下,亲测可用

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

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

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • springboot 集成mybatis-plus_Spring Boot

    springboot 集成mybatis-plus_Spring Bootspringboot集成jasyptJasypt不简介了,懒得在官网copy,直接传送官网说啥都假的,简单粗暴直接上代码引入依赖&amp;lt;dependency&amp;gt; &amp;lt;groupId&amp;gt;com.github.ulisesbocchio&amp;lt;/groupId&amp;gt; &amp;lt;artifactId&amp;gt;jasypt-spring-boot-start

  • Redis分布式锁的正确实现方式(Java版)

    Redis分布式锁的正确实现方式(Java版)https://wudashan.cn/2017/10/23/Redis-Distributed-Lock-Implement/https://blog.csdn.net/l_bestcoder/article/details/79336986一、什么是分布式锁?要介绍分布式锁,首先要提到与分布式锁相对应的是线程锁、进程锁。线程锁:主要用来给方法、代码块加锁。当某个方法或代码使用锁,…

  • 人工智能猴子摘香蕉问题的逻辑表示_猴子拿香蕉实验感悟

    人工智能猴子摘香蕉问题的逻辑表示_猴子拿香蕉实验感悟猴子摘香蕉问题:一个房间里,天花板上挂有一串香蕉,有一只猴子可在房间里任意活动(到处走动,推移箱子,攀登箱子等)。设房间里还有一只可被猴子移动的箱子,且猴子登上箱子时才能摘到香蕉,问猴子在某一状态下(设猴子位置为A,箱子位置为B,香蕉位置在C),如何行动可摘取到香蕉。代码样例:#includestructState{ intmonkey;//-1:MonkeyatA

  • centos7.6开放端口命令_查看端口有没有开放

    centos7.6开放端口命令_查看端口有没有开放概要最近在docker下搭建MySQL和Redis环境,远程linux主机内部网络都走通了,但是就是外网无法连接远程服务器的MySQL和Redis。经过一番查找和学习,终于找到了问题,不仅远程服务器上docker要做好内部和外部端口的映射,关键还要对对外开放的端口添加到防火墙中。内容介绍的逻辑是:本篇文章先记录Centos7下查看防火墙状态和网络状态命令;下一篇将介绍通过docker…

  • 关联关系和依赖关系的区别[建议收藏]

    关联关系:A类实例化的时候需要B类的对象引用或指针作为参数依赖关系:A类的某个方法使用B类,可能是方法的参数是B类或在方法中获得了一个B类的实例某个类以成员变量的形式出现在另一个类中,二者是关联关

    2021年12月18日
  • 在flask中使用jsonify和json.dumps的区别

    在flask中使用jsonify和json.dumps的区别flask提供了jsonify函数供用户处理返回的序列化json数据,而python自带的json库中也有dumps方法可以序列化json对象,那么在flask的视图函数中return它们会有什么不同之处呢?想必开始很多人和我一样搞不清楚,只知道既然框架提供了方法就用,肯定不会错。但作为开发人员,我们需要弄清楚开发过程中各种实现方式的特点和区别,这样在我们面对不同的需求时才能做出相对合理的选择,而

发表回复

您的电子邮箱地址不会被公开。

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