jQuery中的scrollTop方法 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery中的scrollTop方法</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        div{
            width: 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>
posted @ 2020-05-05 22:04  陈太浪  阅读(1107)  评论(0)  编辑  收藏  举报