20.js获取页面卷去的距离以及滚到到指定位置

Deng.994

已于 2024-07-11 09:25:30 修改

阅读量218

点赞数 3

分类专栏： js基础文章标签： javascript 前端

于 2024-07-11 09:09:09 首次发布

本文链接：https://blog.csdn.net/weixin_55688275/article/details/140341674

版权

js基础专栏收录该内容

37 篇文章 0 订阅

订阅专栏

监听window.onscroll事件

获取上面卷去的距离：document.documentElement.scrollTop

获取左边卷去的距离：document.documentElement.scrollLeft

滚动到指定位置

执行 window.scrollTo(参数) 事件

语法1—传递数字:

window.scrollTop(x，y）

x—表示横向滚动的距离

y—表示纵向滚动的距离

语法2—传递对象：

widow.scrollTop({left:xxx,top:xxx})

或者可以添加behavior属性，属性值为smooth，表示平滑滚动

比如：window.scrollTo({left:10, top: 10, behavior: "smooth" })

例子：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
        <style>
            div {
                height: 1300px;
                width: 2000px;
                background-color: pink;
            }
        </style>
    </head>
    <body>
        <button id="btn">点击</button>
        <div></div>
        <script>
            /* 
                浏览器卷去的尺寸
                卷去的高度
                document.documentElement.scrollTop
                卷去的宽度
                document.documentElement.scrollLeft
            */

            // 页面一打开就执行了，滚动条没动就为0
            console.log(document.documentElement.scrollTop); //0

            //要用onscroll动态获取
            //浏览器上面卷去的尺寸
            window.onscroll = function () {
                console.log(document.documentElement.scrollTop);

                // 浏览器左边卷去的尺寸
                // console.log(document.documentElement.scrollLeft);
            };


            //传递数字
            // btn.onclick = function () {
            //     window.scrollTo(10, 500);
            // };

            //传递对象
            btn.onclick = function () {
                window.scrollTo({ top: 1000, behavior: "smooth" });
            };


        </script>
    </body>
</html>