jQuery学习笔记11-scrollTop使用

刺骨的言语ヽ痛彻心扉 2024-04-17 17:07 44阅读 0赞

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            *{
                margin: 0;
                padding: 0;
            }
            .scroll{
                width: 100px;
                height: 200px;
                border: 1px solid red;
                /*auto如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容*/
                overflow: auto;
            }
    
        </style>
        <script src="jQuery/jquery-1.12.4.js"></script>
        <script>
            $(function () {
                var btns = document.getElementsByTagName("button");
                btns[0].onclick = function () {
                    //获取类属性为scroll的滚动条下拉距离
                    console.log($(".scroll").scrollTop());
                //    获取浏览器滚动条下拉距离
                    console.log($("html").scrollTop()+$("body").scrollTop());
                };
                btns[1].onclick = function () {
                    //设置类属性为scroll的滚动条下拉距离
                    $(".scroll").scrollTop(100);
                //    设置浏览器滚动条的下拉距离
                    $("html").scrollTop(300);
                }
            })
        </script>
    </head>
    <body>
    <div class="scroll">我是div我是div我是div我是div
        我是div我是div我是div我是div我是div我是div我是
        div我是div我是div我是div我是div我是div我是div
        我是div我是div我是div我是div我是div我是div我是
        div我是div我是div我是div我是div我是div我是div我
        是div我是div我是div我是div我是div我是div我是div
        我是div我是div我是div我是div我是div我是div我是di
        v我是div我是div我是div我是div我是div我是div我是di
        v我是div我是div我是div我是div我是div我是div我是div
        我是div我是div我是div我是div我是div我是div我是div我
        是div我是div我是div我是div我是div我是div我是div我是
        div我是div我是div我是div我是div我是div</div>
    <button>获取</button>
    <button>设置</button>
    <br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br><br>
    </body>
    </html>