jQuery中的scrollTop方法

本文轉載自查看原文 2020-05-05 22:04 891 JavaScript

<!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>

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 深度理解Jquery 中 scrollTop() 方法 jquery中的scrollTop()和scrollLeft()應該怎么用？【轉】 jQuery中animate( )的方法及$("body").animate({'scrollTop':top},500)不被Firefox支持問題的解決 jQuery中animate()方法以及$('body').animate({"scrollTop":top})不被Firefox支持問題的解決 jQuery的scrollTop()方法獲取的值一直為0的問題 jquery scrollTop()與scrollLeft() [jQuery].scrollTop() 函數詳解 JQuery Div scrollTop ScrollHeight JQuery Div scrollTop ScrollHeight scrollTop