jquery右侧圆点导航菜单

基础概念

jQuery右侧圆点导航菜单是一种常见的网页设计元素，通常用于显示当前页面在网站结构中的位置。这种导航菜单通常由一系列圆点组成，每个圆点代表一个页面或一个部分，当前页面对应的圆点会被高亮显示。

类型

静态圆点导航：圆点的数量和位置是固定的，不会随着页面滚动而变化。
动态圆点导航：圆点的位置会根据页面滚动的位置动态变化，提供更直观的导航体验。

应用场景

单页应用（SPA）：在单页应用中，圆点导航可以帮助用户快速了解当前页面的位置。
长页面：对于包含多个部分的单个长页面，圆点导航可以帮助用户快速导航到感兴趣的部分。
响应式网站：在移动设备上，圆点导航可以提供更好的用户体验。

示例代码

以下是一个简单的jQuery右侧圆点导航菜单的实现示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery Right Dot Navigation</title>
    <style>
        .dot-nav {
            position: fixed;
            right: 20px;
            bottom: 20px;
            display: flex;
            flex-direction: column;
            align-items: center;
        }
        .dot {
            width: 10px;
            height: 10px;
            border-radius: 50%;
            background-color: #ccc;
            margin: 5px;
            cursor: pointer;
        }
        .dot.active {
            background-color: #007bff;
        }
    </style>
</head>
<body>
    <div class="content">
        <!-- 页面内容 -->
        <h1>Section 1</h1>
        <p>Content for section 1...</p>
        <h1>Section 2</h1>
        <p>Content for section 2...</p>
        <h1>Section 3</h1>
        <p>Content for section 3...</p>
    </div>
    <div class="dot-nav">
        <div class="dot active" data-section="section1"></div>
        <div class="dot" data-section="section2"></div>
        <div class="dot" data-section="section3"></div>
    </div>

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function() {
            $('.dot').click(function() {
                var section = $(this).data('section');
                $('html, body').animate({
                    scrollTop: $('#' + section).offset().top
                }, 1000);
            });

            $(window).scroll(function() {
                var scrollPosition = $(this).scrollTop();
                $('.content h1').each(function() {
                    var currentSection = $(this);
                    var sectionTop = currentSection.offset().top;
                    var sectionHeight = currentSection.outerHeight();
                    if (scrollPosition >= sectionTop && scrollPosition < (sectionTop + sectionHeight)) {
                        var sectionId = currentSection.attr('id');
                        $('.dot').removeClass('active');
                        $('.dot[data-section="' + sectionId + '"]').addClass('active');
                    }
                });
            });
        });
    </script>
</body>
</html>