• 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="430px;height:300px;background:#00FF00;overflow:auto">
           <div  id="test1" style="400px;height:300px;background:#FFFFFF">
      </div>
            <div  id="test2" style="400px;height:300px;background:#000000">
      </div>
      <div  id="test3" style="400px;height:300px;background:#00FF00">
      </div>
      <div  id="test4" style="400px;height:300px;background:#0000FF">
      </div>
      <div  id="test5" style="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 下,亲測可用

  • 相关阅读:
    <c:forEach>详解
    JSP基本_JSTL
    鼠标显示效果的形状设置
    linux7.3+nginx1.1+tomcat8.5 搭建负载均衡
    安装zabbix
    Centos7 systemctl使用
    Centos7 yum安装 Lnmp以及Lamp
    Centos7 LAMP环境下安装zabbix3.0
    centos 7.0 搭建LAMP环境
    mysql 配置参数详解
  • 原文地址:https://www.cnblogs.com/zfyouxi/p/4298288.html
Copyright © 2020-2023  润新知