Прокрутка до якоря с jQuery работает только когда вы не на текущей странице

Question

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

URL выглядят примерно так:

• website.com / about # people,
• website.com / about # contact

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

К сожалению, я не могу воспроизвести эту проблему во фрагменте, но я использую тот же js код Странно то, что в этом фрагменте анимация работает, даже если вы на одной странице. И нет, я не получаю никаких ошибок на консоли.

Спасибо!

$('nav a[href^="#"]').click(function(){
    $('html, body').animate({
        scrollTop: $(this.hash).offset().top
    }, 400);
    return false;
});

#topSection{
    background: red;
    height: 400px;
}

#middleSection{
    background: blue;
    height: 400px;
}
#lastSection{
    background: black;
    height: 400px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <nav>
        <ul>
            <li><a href="#topSection">Top Section</a></li>
            <li><a href="#middleSection">Middle Section</a></li>
            <li><a href="#lastSection">Last Section</a></li>
        </ul>
    </nav>
    <div id="topSection">
    </div>
    <div id="middleSection">
    </div>
    <div id="lastSection">
    </div>

Answer 1

Причина, по которой прокрутка до ha sh не работает при посещении страницы с ha sh, заключается в том, что ваш код вызывается только при нажатии на ссылку. Чтобы еще более подробно остановиться на моем комментарии, вам также потребуется вызывать тот же код при загрузке страницы.

Это можно сделать, просто абстрагировав все свои логики c в обработчике кликов, в функцию, которая может быть вызвано независимо от события нажатия:

function smoothScrollTo(hash) {
  if (!hash)
    return;

  $('html, body').animate({
    scrollTop: $(hash).offset().top
  }, 400);
}

$(function() {
  // Smooth scrolling when the page is loaded
  smoothScrollTo(window.location.hash);

  // Smooth scrolling when a link is clicked
  $('nav a[href^="#"]').click(function() {
    smoothScrollTo(this.hash)
    return false;
  });
});

См. подтверждение концепции ниже:

function smoothScrollTo(hash) {
  if (!hash)
    return;

  $('html, body').animate({
    scrollTop: $(hash).offset().top
  }, 400);
}

$(function() {
  // Smooth scrolling when the page is loaded
  smoothScrollTo(window.location.hash);

  // Smooth scrolling when a link is clicked
  $('nav a[href^="#"]').click(function() {
    smoothScrollTo(this.hash)
    return false;
  });
});

#topSection {
  background: red;
  height: 400px;
}

#middleSection {
  background: blue;
  height: 400px;
}

#lastSection {
  background: black;
  height: 400px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<nav>
  <ul>
    <li><a href="#topSection">Top Section</a></li>
    <li><a href="#middleSection">Middle Section</a></li>
    <li><a href="#lastSection">Last Section</a></li>
  </ul>
</nav>
<div id="topSection">
</div>
<div id="middleSection">
</div>
<div id="lastSection">
</div>