jquery页面滚动效果

基础概念

jQuery 是一个快速、小巧且功能丰富的 JavaScript 库，它简化了 HTML 文档遍历、事件处理、动画和 Ajax 交互。页面滚动效果通常指的是通过 JavaScript 或 jQuery 实现的页面内容滚动动画，例如平滑滚动到页面的某个部分。

类型

平滑滚动：页面平滑地滚动到指定位置。
滚动监听：监听滚动事件，根据滚动位置执行不同的操作。
固定导航栏：当页面滚动时，导航栏固定在页面顶部。

应用场景

导航到页面特定部分：用户点击菜单项时，页面平滑滚动到相应的内容区域。
广告或弹窗：当用户滚动到页面的某个位置时，显示广告或弹窗。
图片轮播：根据滚动位置切换图片。

示例代码

以下是一个简单的 jQuery 平滑滚动效果的示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery 平滑滚动示例</title>
    <style>
        body {
            height: 2000px;
        }
        .section {
            height: 500px;
            border: 1px solid #ccc;
        }
        #nav {
            position: fixed;
            top: 10px;
            right: 10px;
        }
    </style>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <div id="nav">
        <a href="#section1">Section 1</a>
        <a href="#section2">Section 2</a>
        <a href="#section3">Section 3</a>
    </div>
    <div id="section1" class="section">Section 1</div>
    <div id="section2" class="section">Section 2</div>
    <div id="section3" class="section">Section 3</div>

    <script>
        $(document).ready(function() {
            $('a[href^="#"]').on('click', function(event) {
                event.preventDefault();
                var target = this.hash;
                var $target = $(target);
                $('html, body').stop().animate({
                    'scrollTop': $target.offset().top
                }, 900, 'swing', function() {
                    window.location.hash = target;
                });
            });
        });
    </script>
</body>
</html>