滚动功能适用于某些单击事件，但不适用于其他事件

对于三种不同的单击事件，我在同一滚动功能上具有三种变体，前两种可以正常工作，并缓慢滚动到元素ID，但是第三个只是直接跳到元素而无需滚动。

    $('#scroll-down').click(function scrollDownProfile(){
        $('html, body').animate({
            scrollTop: $('#profile').offset().top
        }, 500);
    });

    $('#scroll-down-bp').click(function scrollDownBP(){
        $('html, body').animate({
            scrollTop: $('#bp').offset().top
        }, 500);
    });

    $('#scroll-down-software').click(function scrollDownProjects(){
        $('html, body').animate({
            scrollTop: $('#software').offset().top
        }, 500);
    });

考虑到它们都是相同的，我认为这可能与HTML有关，因为每个click事件都在单独的页面上，但是我看不到下面的HTML有什么问题。就像我说的那样，每个HTML代码块都来自不同的页面。

<a id="scroll-down" href="#profile" class="scroll-down">
                <span></span>
            </a>
        </header>
        <nav id="navigation-bar" class="navbar navbar-default" role="navigation">
            <div class="navbar-header">
                <button class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"></button>
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </div>
            <div class="navbar-collapse navbar-ex1-collapse collapse" style="height: 1px">
                <ul class="nav navbar-nav">
                    <li id="nav_profile" class="active">
                        <a href="#profile">Profile</a>
                    </li>
                    <li id="nav_education" class>
                        <a href="#education">Education</a>
                    </li>
                    <li id = "nav_experience" class>
                        <a href="#experience">Experience</a>
                    </li>
                    <li id="nav_contact" class>
                        <a href="#contact">Contact</a>
                    </li>
                </ul>
            </div>
        </nav>

<div id="profile" class="background_white">
            <div class="container">
                <h2>Profile</h2>
            </div>
</div>

<a id="scroll-down-bp" href="#bp" class="scroll-down">
                <span></span>
            </a>
        </header>
        <nav id="navigation-bar" class="navbar navbar-default" role="navigation">
            <div class="navbar-header">
                <button class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"></button>
            </div>
            <div class="navbar-collapse navbar-ex1-collapse collapse" style="height: 1px">
                <ul class="nav navbar-nav">
                    <li id="nav_bp" class="active">
                        <a href="#bp">BP-ICAM</a>
                    </li>
                    <li id="nav_masters" class>
                        <a href="#masters">Master's</a>
                    </li>
                    <li id = "nav_chromition" class>
                        <a href="#chromition">Chromition</a>
                    </li>
                    <li id="nav_references" class>
                        <a href="#Contact">References</a>
                    </li>
                </ul>
            </div>
        </nav>
<div id="bp" class="background_white">
            <div class="container container-about-me">
                <div id="bp-icam logo">
                    <h2>BP-ICAM</h2>
                </div>
            </div>
</div>

<a id="scroll-down-software" href="#software" class="scroll-down">
                <span></span>
            </a>
        </header>
<div id="software" class="background_white">
            <div class="container container-about-me">
                <h2 style="color: #2A293E;">Projects</h2>
            </div>
</div>

可以工作的HTML和不能工作的HTML之间的唯一区别是用户单击的位置和滚动到的元素之间的nav元素。我看不出这会如何导致差异。