Добавление анимации к jQuery Плавная прокрутка для привязки

Question

Я пытаюсь улучшить код прокрутки привязки, который нашел в ответе на другой вопрос. Он отлично работает для прокрутки другой страницы, но прокручивается без анимации, если он находится на той же странице. Дело в том, что мне бы хотелось иметь анимацию для тех же якорей страниц, но я не мог понять, как ее включить.

$(document).ready(function () {
    var urlHash = window.location.href.split("#")[1];
    if (urlHash &&  $('#' + urlHash).length )
          $('html,body').animate({
              scrollTop: $('#' + urlHash).offset().top - 60
          }, 2500);
});

Answer 1

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

function scrollToAnchor (url) {
  var urlHash = url.split('#')[1];
  if (urlHash &&  $('#' + urlHash).length) {
        $('html').animate({
            scrollTop: $('#' + urlHash).offset().top - 60
        }, 2500);
  }
}

$(document).ready(function () {
  scrollToAnchor(window.location.href);
});

$('.nav-link').click(function (event) {
  event.preventDefault(); // stop the browser from snapping to the anchor
  scrollToAnchor(event.target.href);
});

.section {
  height: 300px;
  width: 300px;
  border: 1px solid #000;
}

.nav {
  right: 10px;
  top: 10px;
  position: sticky;
  display: block;
  width: 100%;
  height: 1.5em;
  background: #ccc;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="nav">
<a class="nav-link" href="#a">A</a>
<a class="nav-link" href="#b">B</a>
<a class="nav-link" href="#c">C</a>
<a class="nav-link" href="#d">D</a>
<a class="nav-link" href="#e">E</a>
</div>

<br>
<div class="section" id="a">A</div>
<div class="section" id="b">B</div>
<div class="section" id="c">C</div>
<div class="section" id="d">D</div>
<div class="section" id="e">E</div>

Answer 2

Возможно проверить W3Schools?

https://www.w3schools.com/howto/howto_css_smooth_scroll.asp#section1

Назад, когда я использовал плавную прокрутку для вещей, этот код всегда работал для меня