Animowany podjazd / scroll do dotwicy js.

function animowanyPodjazDoKotwicy(){
const nawigacjaLinki = document.querySelectorAll('nav a');

  nawigacjaLinki.forEach(function (link) {
    link.addEventListener('click', function (e) {
      e.preventDefault();

      const celId = this.getAttribute('href').substring(1);
      const celElement = document.getElementById(celId);

      if (celElement) {
        plynniePrzewinDo(celElement);
      }
    });
  });

  function plynniePrzewinDo(celElement) {
    const pozycjaPoczatkowa = window.pageYOffset;
    const pozycjaDocelowa = celElement.getBoundingClientRect().top + pozycjaPoczatkowa;
    const czasTrwania = 1000; // Czas trwania animacji w milisekundach
    const czasRozpoczecia = performance.now();

    function animuj(aktualnyCzas) {
      const uplyneloCzasu = aktualnyCzas - czasRozpoczecia;
      const postep = Math.min(uplyneloCzasu / czasTrwania, 1);

      window.scrollTo(0, pozycjaPoczatkowa + (pozycjaDocelowa - pozycjaPoczatkowa) * postep);

      if (postep < 1) {
        requestAnimationFrame(animuj);
      }
    }

    requestAnimationFrame(animuj);
  }
}
animowanyPodjazDoKotwicy();

Dodaj komentarz