zoukankan      html  css  js  c++  java
  • jQuery 移动网页到制定的位置

    jQuery 移动网页到制定的位

    结合jQuery,通过触发一个动作,然后,将网页移动到页面中某一个要素的位置,使其处于可使范围内

    参考代码:

    <!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>
    <title>jQuery控制页面滚动</title>
      <meta http-equiv="Content-Type" content="text/html; charset=gbk2312" />
      <script type="text/javascript" src="../Scripts/jquery-1.4.1.js"></script>
      <script type="text/javascript" src="ZhongyiData_management_js.js"></script>
      <link type="text/css" rel="Stylesheet" href="ZhongyiData_management_css.css" />
    </head>
    <body>
      <div id="DIV_Main">
        <div id="ID_DIV_DataGrid"></div>
        <div id="ID_DIV_DataUpdata"></div>
      </div>
    </body>
    </html>

    CSS 

    #DIV_Main
    {
       100%;
      height: 100%;
      overflow: visible;
    }
    #ID_DIV_DataGrid
    {
      background-color: Gray;
       100%;
      height: 1000px;
    }

    #ID_DIV_DataUpdata
    {
      background-color: Blue;
       100%;
      height: 600px;
    }

    JAVASCRIPT

    $(function () {

      var m_body = (window.opera) ? (document.compatMode == "CSS1Compat" ? $('html') : $('body')) : $('html,body'); 

      $('#ID_DIV_DataGrid').click(function () {
        m_body.animate({ scrollTop: $('#ID_DIV_DataUpdata').offset().top }, 100);
      });
    });

    来源:参考网络资料+实践

    ->每天进步一点点<-

    jason

  • 相关阅读:
    MySql日期与时间函数
    Redis内存分析工具redis-rdb-tools
    MYSQL5.7脚本运行时出现[Warning] Using a password on the command line interface can be insecure
    Prometheus
    Shopt命令(删除排除)
    Nginx配置跨域支持功能
    Nginx之 try_files 指令
    Grafana使用阿里云短信的报警实现
    用python发送短消息(基于阿里云平台)
    同步pod时区与node主机保持一致
  • 原文地址:https://www.cnblogs.com/xingchen/p/2633443.html
Copyright © 2011-2022 走看看