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


相关推荐

  • RSA加密算法流程图

    RSA加密算法流程图RSA加密算法流程图

    2022年5月15日
    59
  • WPF 入门教程WrapPanel介绍「建议收藏」

    WPF 入门教程WrapPanel介绍「建议收藏」WrapPanel将定位每个子控件的旁边,另外,水平方向(默认值)或垂直,直到没有更多的空间,在那里将换到下一行,然后继续。当您想要一个垂直或水平列表控件在没有更多空间时自动换行时使用它。当WrapPanel使用Horizo​​ntal方向时,子控件将被赋予相同的高度,基于最高的项目。当WrapPanel为垂直方向时,子控件将被赋予相同的宽度,基于最宽的项目。在第一个示例中,我们将检查具有默认(水平)方向的WrapPanel:<Windowx:Class=”WpfTu

    2022年7月23日
    10
  • 在pycharm中导入torch_pycharm导入numpy出错

    在pycharm中导入torch_pycharm导入numpy出错安装好numpy之后,在pycharm运行以下程序importnumpyasnpa=np.arange(10)print(a)”出现运行程序出现错误:ImportError:Nomodulenamednumpy如图所示:解决方法:首先打开pycharm菜单栏File>>Settings…然后单击Project>>Project…

    2022年8月29日
    5
  • JavaCV开发详解之1:调用本机摄像头并预览摄像头图像画面视频(建议使用javaCV最新版本)「建议收藏」

    JavaCV开发详解之1:调用本机摄像头并预览摄像头图像画面视频(建议使用javaCV最新版本)「建议收藏」快速传送至:javacv入门指南:序章javaCV系列文章:javacv开发详解之1:调用本机摄像头视频javaCV开发详解之2:推流器实现,推本地摄像头视频到流媒体服务器以及摄像头录制视频功能实现(基于javaCV-FFMPEG、javaCV-openCV)javaCV开发详解之3:收流器实现,录制流媒体服务器的rtsp/rtmp视频文件(基于javaCV-FFMPEG)j…

    2022年6月12日
    30
  • ModelSim安装破解出现Unable to checkout a license.Make sure you licence file…..错误

    ModelSim安装破解出现Unable to checkout a license.Make sure you licence file…..错误说了你们可能不信,装ModelSim软件,今天整整装了一天才弄好,一直出现下面的错误。下面详细说一下解决这个问题的办法:方法一:不正面解决这个问题在FPGA做仿真的时候,可以不需要单独破解版的ModelSim,直接使用Quartus软件自带的ModelSim-Altrea安装上面两个软件,然后在仿真的时候,路径设置对就可以这个时候,你安装的ModelSim在桌面的图标你可以发现是叫ModelSim-Altrea方法二:正面解决这个问题如果你跟我一样,非要安装独立的版本,当你遇到这个问题的

    2022年5月12日
    55
  • linux安装svn服务器_linux安装svn客户端

    linux安装svn服务器_linux安装svn客户端1.https://tortoisesvn.net/downloads.html网站下载2.安装的时候如果出现下图的报错打开这个网站https://www.microsoft.com/zh-cn/download/confirmation.aspx?id=49062,会自动帮你下载下载完成后安装即可3.没有特殊需求则默认安装4.出现这个则安装成功MySQL安装…

    2022年8月18日
    8

发表回复

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

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