js中scrollTop()方法和scroll()方法用法示例

下面是 JS 中 scrollTop() 方法和 scroll() 方法的用法示例攻略：

1. scrollTop() 方法

1.1 定义和用途

scrollTop() 方法用于获取或设置滚动条在垂直方向上的偏移量。

1.2 语法

// 获取滚动条在垂直方向上的偏移量
$(selector).scrollTop()

// 设置滚动条在垂直方向上的偏移量
$(selector).scrollTop(value)

1.3 示例说明

示例1

如下代码演示如何通过scrollTop()方法获取滚动条垂直方向上的偏移量：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>scrollTop() 方法示例</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
    <div style="height: 1000px;">
        <h1>这是一个标题</h1>
    </div>
    <script>
        var scrollTopValue = $("html").scrollTop();
        console.log("滚动条在垂直方向上的偏移量为：" + scrollTopValue);
    </script>
</body>
</html>

运行代码后会在控制台打印出当前滚动条在垂直方向上的偏移量。

示例2

如下代码演示如何通过scrollTop()方法设置滚动条垂直方向上的偏移量：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>scrollTop() 方法示例</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
    <div id="box" style="height: 1000px;">
        <h1>这是一个标题</h1>
    </div>
    <button onclick="scrollToTop()">回到顶部</button>

    <script>
        function scrollToTop(){
            $("#box").scrollTop(0);
        }
    </script>
</body>
</html>

点击“回到顶部”按钮，页面会滚动到最上面。这是通过调用scrollTop() 方法来设置滚动条在垂直方向上的偏移量为0实现的。

2. scroll() 方法

2.1 定义和用途

scroll() 方法用于为元素绑定或触发滚动事件。

2.2 语法

// 为元素绑定滚动事件
$(selector).scroll(function(){...})

// 触发元素的滚动事件
$(selector).scroll()

2.3 示例说明

示例1

如下代码演示如何为元素绑定滚动事件：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>scroll() 方法示例</title>
    <style>
        #box{
            height: 200px;
            overflow: auto;
        }
    </style>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
    <div id="box">
        <p>这是第一行</p>
        <p>这是第二行</p>
        <p>这是第三行</p>
        <p>这是第四行</p>
        <p>这是第五行</p>
        <p>这是第六行</p>
        <p>这是第七行</p>
        <p>这是第八行</p>
        <p>这是第九行</p>
        <p>这是第十行</p>
    </div>

    <script>
        $("#box").scroll(function(){
            console.log("元素滚动了！");
        })
    </script>
</body>
</html>

运行代码后，当你在滚动#box元素时，在控制台会输出“元素滚动了！”。

示例2

如下代码演示如何触发元素的滚动事件：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>scroll() 方法示例</title>
    <style>
        #box{
            height: 200px;
            overflow: auto;
        }
    </style>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
    <div id="box">
        <p>这是第一行</p>
        <p>这是第二行</p>
        <p>这是第三行</p>
        <p>这是第四行</p>
        <p>这是第五行</p>
        <p>这是第六行</p>
        <p>这是第七行</p>
        <p>这是第八行</p>
        <p>这是第九行</p>
        <p>这是第十行</p>
    </div>

    <button onclick="scrollBox()">滚动#box元素</button>

    <script>
        function scrollBox(){
            $("#box").scrollTop(100);
            $("#box").scroll();
        }
    </script>
</body>
</html>

点击“滚动#box元素”按钮，会将#box元素的滚动条往下滚动100px，并触发滚动事件。在控制台你可以看到输出“元素滚动了！”。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：js中scrollTop()方法和scroll()方法用法示例 - Python技术站