侧边栏Anchor标签点击滚动至对应Section功能失效求助

我实现了页面侧边栏，所有内容均置于侧边栏内，但点击侧边栏内带href的标签无法跳转到对应Section，animate滚动函数完全失效，多次修改代码后问题仍未解决，相关代码如下：

原HTML代码 #

<div class="side-overlay" id="side-overlay">
    <div class="faq_sidebar" id="faqs">
        <div class="container-fluid faq-section1">
            <div class="row">
                <div class="col-md-11">
                    <h5 class="subscription-subhead">
                        FAQ’s
                    </h5>
                    <h2 class="subscription-title js-scroll fade-in-bottom">
                        You have questions,
                        we have answers
                    </h2>
                </div>
                <div class="col-md-1 faq_close">
                    <a href="javascript:void(0)" id="closefaqx" class="closebtn_faq" onclick="closeFaq()"><img src="./images/cross X.png" alt="" class="closebar"></a>
                </div>
            </div>
        </div>

        <div class="faq_section2">
            
            <nav class="navigation" id="mainNav">
                <a class="navigation__link" href="#1">What is Lorem Ipsum?</a>
                <a class="navigation__link" href="#2">Why do we use it?</a>
                <a class="navigation__link" href="#3">Where does it come from?</a>
                <a class="navigation__link" href="#4">Where can I get some?</a>
                <a class="navigation__link" href="#5">What is Lorem Ipsum?</a>
            </nav>

            <div class="tab-content">
                <div class="nestednav">
                    <div class="page-section hero" id="1">
                        <h1>section 1</h1>
                        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem, incidunt eos provident dolore illum veniam molestias beatae eveniet molestiae aliquid soluta cum iste nam, necessitatibus repellat totam, pariatur est tenetur?</p>
                        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem, incidunt eos provident dolore illum veniam molestias beatae eveniet molestiae aliquid soluta cum iste nam, necessitatibus repellat totam, pariatur est tenetur?</p>
                    </div>
                    <div class="page-section" id="2">
                        <h1>section 2</h1>
                        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem, incidunt eos provident dolore illum veniam molestias beatae eveniet molestiae aliquid soluta cum iste nam, necessitatibus repellat totam, pariatur est tenetur?</p>
                        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem, incidunt eos provident dolore illum veniam molestias beatae eveniet molestiae aliquid soluta cum iste nam, necessitatibus repellat totam, pariatur est tenetur?</p>
                        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem, incidunt eos provident dolore illum veniam molestias beatae eveniet molestiae aliquid soluta cum iste nam, necessitatibus repellat totam, pariatur est tenetur?</p>
                        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem, incidunt eos provident dolore illum veniam molestias beatae eveniet molestiae aliquid soluta cum iste nam, necessitatibus repellat totam, pariatur est tenetur?</p>
                        
                    </div>
                    <div class="page-section" id="3">
                        <h1>Section Three</h1>
                        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem, incidunt eos provident dolore illum veniam molestias beatae eveniet molestiae aliquid soluta cum iste nam, necessitatibus repellat totam, pariatur est tenetur?</p>
                        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem, incidunt eos provident dolore illum veniam molestias beatae eveniet molestiae aliquid soluta cum iste nam, necessitatibus repellat totam, pariatur est tenetur?</p>
                    </div>
                    <div class="page-section" id="4">
                        <h1>Section Four</h1>
                        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem, incidunt eos provident dolore illum veniam molestias beatae eveniet molestiae aliquid soluta cum iste nam, necessitatibus repellat totam, pariatur est tenetur?</p>
                        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem, incidunt eos provident dolore illum veniam molestias beatae eveniet molestiae aliquid soluta cum iste nam, necessitatibus repellat totam, pariatur est tenetur?</p>
                        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem, incidunt eos provident dolore illum veniam molestias beatae eveniet molestiae aliquid soluta cum iste nam, necessitatibus repellat totam, pariatur est tenetur?</p>
                        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem, incidunt eos provident dolore illum veniam molestias beatae eveniet molestiae aliquid soluta cum iste nam, necessitatibus repellat totam, pariatur est tenetur?</p>
                    </div>
                    <div class="page-section" id="5">
                        <h1>Section Five</h1>
                        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem, incidunt eos provident dolore illum veniam molestias beatae eveniet molestiae aliquid soluta cum iste nam, necessitatibus repellat totam, pariatur est tenetur?</p>
                        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem, incidunt eos provident dolore illum veniam molestias beatae eveniet molestiae aliquid soluta cum iste nam, necessitatibus repellat totam, pariatur est tenetur?</p>
                        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem, incidunt eos provident dolore illum veniam molestias beatae eveniet molestiae aliquid soluta cum iste nam, necessitatibus repellat totam, pariatur est tenetur?</p>
                        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem, incidunt eos provident dolore illum veniam molestias beatae eveniet molestiae aliquid soluta cum iste nam, necessitatibus repellat totam, pariatur est tenetur?</p>
                        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem, incidunt eos provident dolore illum veniam molestias beatae eveniet molestiae aliquid soluta cum iste nam, necessitatibus repellat totam, pariatur est tenetur?</p>
                    </div>
                </div>
            </div>

        </div>
    </div>
</div>

原JS代码 #

$(document).ready(function () {

    $('a[href*=\\#]').bind('click', function (e) {
        // e.preventDefault(); // prevent hard jump, the default behavior

        var target = $(this).attr("href");
        console.log(target);
        $('html, body').animate({
            scrollTop: $(target).offset().top
        }, 600);
    });
});

e.addEventListener('scroll', () => {
    var scrollDistance = $(window).scrollTop();

    // Assign active class to nav links while scolling
    $('.page-section').each(function (i) {
        if ($(this).position().top <= scrollDistance) {
            $('.navigation a.active').removeClass('active');
            $('.navigation a').eq(i).addClass('active');
        }
    });
});

// 

$(document).ready(function () {

    var fixmeTop = $('.navigation a').offset().top;       // get initial position of the element

    e.addEventListener('scroll', () => {
        var navlast = document.getElementsByClassName('navigation');
        var lastLi = navlast[navlast.length - 1];
        var currentScroll = $(window).scrollTop(); // get current position

        if (currentScroll >= fixmeTop) {
            console.log("Greater value");
            $('.navigation').css({
                position: 'absolute',
                top: '50px',
                float: 'left'
            });
        }
        else {
            console.log("Smaller value");
            $('.navigation').css({
                position: 'fixed',
                top: '80px',
                float: 'left'
            });
        }
    });
});

问题分析与修复方案 #

核心问题点 #

1. 未阻止a标签默认行为：注释掉了e.preventDefault()，导致点击后浏览器直接跳转到锚点，animate动画被覆盖
2. 滚动容器错误：代码给html, body设置滚动动画，但实际滚动区域是侧边栏内的.nestednav容器（所有内容都在这个容器里，滚动条属于它而非整个页面）
3. 变量未定义：直接使用e.addEventListener会报错，e未定义，应该绑定到正确的滚动容器或window
4. 滚动位置判断错误：导航激活状态和定位逻辑用了window.scrollTop，但实际应该监听.nestednav的滚动事件

修复后的完整JS代码 #

$(document).ready(function () {
    // 获取实际滚动容器
    const $scrollContainer = $('.nestednav');

    // 处理锚点点击滚动
    $('a.navigation__link[href*="#"]').bind('click', function (e) {
        e.preventDefault(); // 必须阻止默认跳转行为
        const target = $(this).attr("href");
        const $targetSection = $(target);
        
        if ($targetSection.length) {
            // 滚动到目标区域，相对于滚动容器的顶部偏移
            $scrollContainer.animate({
                scrollTop: $targetSection.offset().top - $scrollContainer.offset().top + $scrollContainer.scrollTop()
            }, 600);
        }
    });

    // 监听滚动容器的滚动事件，更新导航激活状态
    $scrollContainer.on('scroll', function () {
        const scrollDistance = $scrollContainer.scrollTop();

        $('.page-section').each(function (i) {
            // 计算当前section相对于滚动容器的顶部位置
            const sectionTop = $(this).offset().top - $scrollContainer.offset().top;
            if (sectionTop <= scrollDistance + 10) { // 加10是为了提前激活
                $('.navigation a.active').removeClass('active');
                $('.navigation a').eq(i).addClass('active');
            }
        });
    });

    // 导航栏定位逻辑（如果需要保留）
    const $navigation = $('.navigation');
    const fixmeTop = $navigation.offset().top;

    $(window).on('scroll', function () {
        const currentScroll = $(window).scrollTop();
        if (currentScroll >= fixmeTop) {
            $navigation.css({
                position: 'fixed',
                top: '80px',
                left: $navigation.offset().left // 保持左侧位置不变
            });
        } else {
            $navigation.css({
                position: 'static' // 恢复默认定位
            });
        }
    });
});

额外CSS注意事项 #

确保.nestednav容器有滚动属性，否则无法滚动：

.nestednav {
    max-height: calc(100vh - 200px); /* 根据实际布局调整高度 */
    overflow-y: auto;
}

内容的提问来源于stack exchange，提问作者sid