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


相关推荐

  • Nginx的启动、停止与重启

    Nginx的启动、停止与重启

    2021年10月18日
    34
  • 程序员常说的外包公司到底是什么意思_程序员项目外包

    程序员常说的外包公司到底是什么意思_程序员项目外包程序员工作的企业有好几种类型,比如说互联网企业,传统企业,还有外包公司,这几种类型的企业不论是工作性质还是福利待遇都有差异。都说外包公司不好,今天就来说说什么是外包公司。外包公司到底是什么?为了更好地分析,我们需要了解什么是外包。外包是一种将目标,委托给其他组织的管理模型。外包有很多种,如项目外包、产品外包、工程外包等等。而我们最为关心的,则是人力资源外包。这样说比较抽象,我来举个例子。项目外包:为了完成某个项目,出于进度、成本,甚至是风险转移的考量,将项目拆分一部分(如非核心部

    2022年9月30日
    2
  • DirectX修复工具使用技巧之二——手动修复C++创建失败的文件

    DirectX修复工具使用技巧之二——手动修复C++创建失败的文件最后更新:2021-2-25随着V4.0正式版的发布,近来有部分用户来咨询如何解决C++文件创建失败的问题。在此我将以解决最常见的C++2015-2019文件创建失败为例,向大家演示一下在线修复的方法,其他C++或文件的方法大同小异。此次操作以Windows7为例,其他系统相应参考即可。首先,如果希望程序能手动在线修复创建失败的失败,请首先确定您使用的V4.0.2版或更高版本,老版本不支持此功能。查看程序版本的方式可以把鼠标放在DirectXRepair.e…

    2022年6月8日
    57
  • 屡次停止运行怎么解决_很抱歉已停止运行解决方法

    屡次停止运行怎么解决_很抱歉已停止运行解决方法背景我一般运行appium都是在osx或者linux上面,最近在教几个同事使用appium做些自动化(爬虫)的事,有几个人使用的是windows,配置环境搞了很久,服务跑起来了之后,用代码运行,又报了上面标题的错误。问题分析首先判断,这是一个python的错误,也就是说,不是appium本身的问题,那就从两点开始分析,要么是系统环境问题,要么是哪里的配置问题。先从配置的问题开始下手,毕竟新手一般都容易犯一些低级错误。但是拿着同事的代码在另一位同事的机器(osx)上跑,怎么都

    2022年10月1日
    3
  • todomvc项目_reactive vue

    todomvc项目_reactive vue所有实现代码在文章结尾处分析整个实现过程的步骤:1.显示大标题“todoMVC”在h1中引入{{msg}},在js文件中将msg赋值,从而在html中显示大标签的内容2.当没有数据时,两块模板需要隐藏,用到v-if标签。将两个模板放在一个template标签中,当items.length=0时,则v-if=false,进而两块模板隐藏。3.引入数据。将JS中写好的默认数据引入在html的每一个li标签中。4.将每个事件划分为完成/未完成。该功能用到双向数据绑定,可以在浏览器中vue模

    2025年10月30日
    3
  • 测试sleep()和pthread_cond_timewait()之间的区别

    测试sleep()和pthread_cond_timewait()之间的区别用来测试sleep()和pthread_cond_timewait()之间的区别通过#if0/1来分别测试当从终端输入q时,通过打印来判断是否可以立即返回结束线程,还是要等睡眠时间到了才能结束线程。当条件满足时,pthread_cond_signal()来触发代码#include&lt;stdio.h&gt;#include&lt;stdlib.h&gt;#include&lt;strin…

    2022年5月20日
    71

发表回复

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

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