博客

jQuery scrollTop()的应用实例

  • Post category:jquery

那么我们就来详细讲解一下“jQuery scrollTop()的应用实例”的完整攻略。

简介

jQuery scrollTop()方法用于设置或获取元素的垂直滚动条位置。该方法可以应用于任何 HTML 元素，但在实际中最常使用于文档操作中。

使用方法

获取元素垂直滚动条位置

下面是一条获取元素垂直滚动条位置的示例：

var scrollTopPosition = $('body').scrollTop();
console.log(scrollTopPosition);

实例中调用了 $ 函数，获取了 <body> 元素，然后使用 scrollTop() 方法获取元素的垂直滚动条位置。最后将位置信息输出到控制台。

设置元素垂直滚动条位置

下面是一条设置元素垂直滚动条位置的示例：

$('body').scrollTop(100);

实例中调用了 $ 函数，获取了 <body> 元素，然后使用 scrollTop() 方法设置元素的垂直滚动条位置为 100。

应用场景

滑动到顶部按钮

我们通常会在页面底部添加一个“回到顶部”的按钮，让用户可以方便地返回到页面顶部。这个功能的实现需要用到 scrollTop() 方法。

HTML 结构：

<!DOCTYPE html>
<html>
<head>
    <title>滑动到顶部按钮示例</title>
    <style>
        #back-to-top {
            position: fixed;
            bottom: 20px;
            right: 20px;
            display: none;
        }
    </style>
</head>
<body>
    <h1>滑动到顶部按钮示例</h1>
    <p>这是一个示例页面。在这里你可以看到一个“回到顶部”的按钮。</p>
    <button id="back-to-top">回到顶部</button>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script>
        $(document).ready(function(){
            $(window).scroll(function(){
                if ($(this).scrollTop() > 100) {
                    $('#back-to-top').fadeIn();
                } else {
                    $('#back-to-top').fadeOut();
                }
            });
            $('#back-to-top').click(function(){
                $('html, body').animate({scrollTop : 0},800);
                return false;
            });
        });
    </script>
</body>
</html>

CSS 样式：

我们可以通过CSS样式将“回到顶部”按钮的位置定位在页面右下角，并将其默认隐藏起来。

JavaScript 代码：

我们在页面加载完成后使用 jQuery 函数来获取“回到顶部”按钮，并为其添加了两个事件监听，分别对应了滚动条位置在一定高度时使按钮显示，并点击后让滚动条滑动到顶部。

页面菜单栏随滚动条滑动

另一个常见的应用场景是让页面的菜单栏随着滚动条的滚动而滑动到页面的特定位置。这也需要用到 scrollTop() 方法。

HTML 结构：

<!DOCTYPE html>
<html>
<head>
    <title>页面菜单栏随滚动条滑动示例</title>
    <style>
        #menu {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            background: #f2f2f2;
        }
        #content {
            padding-top: 100px;
        }
        .section {
            height: 1000px;
            background: #ccc;
            margin-bottom: 20px;
        }
    </style>
</head>
<body>
    <header id="menu">
        <h1>菜单</h1> 
    </header>
    <div id="content">
        <div class="section">Section 1</div>
        <div class="section">Section 2</div>
        <div class="section">Section 3</div>
    </div>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script>
        $(document).ready(function(){
            $(window).scroll(function(){
                if ($(this).scrollTop() > 50) {
                    $('#menu').addClass('fixed');
                } else {
                    $('#menu').removeClass('fixed');
                }
            });
        });
    </script>
</body>
</html>

CSS 样式：

我们使用CSS样式将菜单栏设置为fixed，并设置菜单栏的背景色为灰色。

JavaScript 代码：

在页面加载完成后使用 jQuery 函数来监听窗口滚动事件，并通过 scrollTop() 方法的返回值来判断何时为菜单栏添加或移除 fixed 类。

总结

本文介绍了 scrollTop() 方法的使用方法，以及该方法在实际场景中的两个使用示例。希望本文能够帮助大家更好地理解和使用 scrollTop() 方法。

Tags: