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

  • 相关阅读:
    通信专业术语解释
    STM32F10系列管脚设置
    [笔试题]使用回调函数编写冒泡排序,可以排序整形数组,也可以排序字符串
    Date常用转换、比较
    哈希映射
    APP技巧格式
    $.get/$.post/$.ajax/$.getJSON
    使用Rss框架PHP开发流程
    测试rss与navicat连接
    验证码技术
  • 原文地址:https://www.cnblogs.com/xingchen/p/2633443.html
Copyright © 2011-2022 走看看