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>
    
  • 相关阅读:
    Java实现 LeetCode 792 自定义字符串排序(暴力)
    Java实现 LeetCode 792 自定义字符串排序(暴力)
    asp.net session对象的持久化
    Java实现 LeetCode 791 自定义字符串排序(桶排序)
    Java实现 LeetCode 791 自定义字符串排序(桶排序)
    Java实现 LeetCode 791 自定义字符串排序(桶排序)
    Java实现 LeetCode 790 多米诺和托米诺平铺(递推)
    Java实现 LeetCode 790 多米诺和托米诺平铺(递推)
    Java实现 LeetCode 790 多米诺和托米诺平铺(递推)
    小白也能看懂的约瑟夫环问题
  • 原文地址:https://www.cnblogs.com/TomHe789/p/12833148.html
Copyright © 2011-2022 走看看