Как решить проблему связанную с переходом по якорю?

Question

Всем привет, есть вот такой код

  <script>
  $(document).ready(function(){
    $("#navabout").on("click","a", function (event) {
        event.preventDefault();
        var id  = $(this).attr('href'),
            top = $(id).offset().top - 48;
        $('body,html').animate({scrollTop: top}, 1500);
    });
});
</script>

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

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

Answer 1

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

UPD В общем, объясню чуть более подробно ситуацию. У меня на сайте есть шапка и навбар. Есть скрипт, который при скроле на 100px дает навбару значения position: fixed; top: 0; чтобы навбар при загрузке страницы не перекрывал шапку и из-за некоторых особенностей сайта.

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

То есть при нажатии на ссылку в навбаре со свойствами postion: unset, скрипт считал от одного значения top, а при нажатии на ссылку в навбаре со свойством postion: fixed, он считал уже от другого значения.

(Когда у вас случается подобная проблема, сделайте в для себя демку без лишнего кода и проанализируйте из-за чего может быть проблема)

БЛОГ НА HUSL

Как решить проблему связанную с переходом по якорю?

Ответы (1 шт):