Smooth scroll - czysty JS

Question

Witam, podjąłem próbę zrobienia smooth scroll w czystym JS, niestety napotkałem problem. Na stronie mam sticky menu. Gdy strona jest przesunięta na samą górę - smooth scroll działa, ale jeśli zjedziemy trochę w dół i klikniemy na odnośnik - smooth scroll nie działa i nie przenosi do odpowiedniej sekcji. Dlaczego?

Chcę to zrobić w czystym JS. Codepen: https://codepen.io/genghis/pen/roNaej

Answer 1

// początek funkcji
function scrollTo(element, e) {
  e.preventDefault();
...
//wywołanie
bottom.addEventListener('click', (e) => scrollTo(section3, e));

   to chyba będzie do zmiany, co drugie kliknięcie przenosi w inne miejsce.

top: element.getBoundingClientRect().top - 50

Wyjaśnienie - elementy middle i bottom są linkami, na kliknięcie wykonują domyślne akcje, które trzeba zablokować przez prevent default.

Comments

Dzięki, o to po części chodziło + jeszcze znalazłem rozwiązanie z tym, że co drugie kliknięcie przenosi w inne miejsce. Linijkę

top: element.getBoundingClientRect().top - 50

zmieniłem na

top: element.getBoundingClientRect().top - 50 + window.scrollY

 

Answer 2

Zdaje mi się, że getBoundingClientRect zwraca odległość względem widoku. Więc jeżeli jesteś na górze to pozycja będzie prawidłowa jednak gdy już zjedziesz na dół to odległość się zmniejszy a ty zostaniesz cofnięty w nieprawidłowe miejsce.