zoukankan      html  css  js  c++  java
  • jQuery中的scrollTop方法

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>jQuery中的scrollTop方法</title>
        <style>
            *{
                margin: 0;
                padding: 0;
            }
            div{
                 200px;
                height: 500px;
                overflow: auto;
            }
            html{
                height: 2000px;
            }
        </style>
        <script src="../js/jquery-1.11.3.js"></script>
        <script>
    
            // scrollTop()/scrollLeft()
            // 获取匹配元素相对滚动条顶部/左部的偏移偏移量
            // 此方法对可见和隐藏元素均有效
            $(function () {
                var btns = document.getElementsByTagName("button");
                // var box = document.getElementsByTagName("div");
                btns[0].onclick = function () {
                    // 获取div相对滚动条顶部的偏移量
                    // console.log($("div").scrollTop());
    
                    // 获取整个网页相对滚动条顶部的偏移量
                    // $("html").scrollTop() + $("body").scrollTop() 兼容IE浏览器
                    console.log($("html").scrollTop() + $("body").scrollTop());
    
    
                };
    
                btns[1].onclick = function () {
                    // 设置div相对滚动条顶部的偏移量
                    // $("div").scrollTop(200);
    
                    // 设置整个网页相对滚动条顶部的偏移量
                    // $("html,body") 兼容IE浏览器
                    $("html,body").scrollTop(400);
                };
            });
        </script>
    </head>
    <body>
    <div>我是文本内容我是文本内容我是文本内容我是文本内容我是文本内容我是文本内容我是文本内容我是文本内容我是文本内容我是文本内容我是文本内容我是文本内容我是文本内容我是文本内容我是文本内容我是文本内容我是文本内容我是文本内容我是文本内容我是文本内容我是文本内容我是文本内容我是文本内容我是文本内容我是文本内容我是文本内容我是文本内容我是文本内容我是文本内容我是文本内容我是文本内容我是文本内容我是文本内容我是文本内容我是文本内容我是文本内容我是文本内容我是文本内容我是文本内容我是文本内容我是文本内容我是文本内容我是文本内容我是文本内容我是文本内容我是文本内容我是文本内容我是文本内容我是文本内容我是文本内容我是文本内容我是文本内容我是文本内容我是文本内容我是文本内容我是文本内容我是文本内容我是文本内容我是文本内容我是文本内容我是文本内容我是文本内容我是文本内容我是文本内容我是文本内容我是文本内容我是文本内容我是文本内容我是文本内容我是文本内容我是文本内容我是文本内容我是文本内容我是文本内容我是文本内容我是文本内容我是文本内容我是文本内容我是文本内容我是文本内容我是文本内容我是文本内容我是文本内容我是文本内容我是文本内容我是文本内容我是文本内容我是文本内容我是文本内容</div>
    <button>获取</button>
    <button>设置</button>
    </body>
    </html>
    
  • 相关阅读:
    转char varchar nvarchar区别
    NHibernate和Spring.Net框架介绍(一)
    ASP.NET面试题(一)
    存储过程编写经验和优化措施
    软件工程师不可不知的10个概念
    优化数据库前问自己的10个问题
    ZOJ 1610 Count the Colors (线段树)
    POJ 3667 Hotel (线段树)
    HDU Best Reward (扩展KMP)
    POJ 3277 City Horizon (线段树)
  • 原文地址:https://www.cnblogs.com/TomHe789/p/12833148.html
Copyright © 2011-2022 走看看