Блог

У меня есть три варианта одной и той же функции прокрутки для трех разных событий щелчка, два верхних работают нормально, медленно прокручиваясь до идентификатора элемента, однако третий просто переходит прямо к элементу без прокрутки.

     $('#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, поскольку каждое событие щелчка находится на отдельной странице, однако я не вижу ничего плохого в приведенном ниже 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 через средство проверки html, просто чтобы быть уверенным. Тогда я бы написал прослушиватели щелчков следующим образом:

 $('#scroll-down').on('click', function {
    $('#profile')[0].scrollIntoView({behavior: "smooth", block: "start"});
});
  

Для справки: https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView