Animowany podjazd / scroll do dotwicy js. działający na mobile dla block editor theme

Ta funkcja wymaga użycia biblioteki gsap i pluginu scroll:

    wp_enqueue_script('gsap', 'https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js', array(), '1.0', true);
    wp_enqueue_script('scrolltoplugin', 'https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/ScrollToPlugin.min.js', array(), '1.0', true);


// Funkcja obsługująca animowany podjazd do kotwicy
function animowanyPodjazDoKotwicy() {
  // Znajdź wszystkie linki w nawigacji
  const nawigacjaLinki = document.querySelectorAll('nav a.wp-block-navigation-item__content');

  // Dla każdego znalezionego linka
  nawigacjaLinki.forEach(function (link) {
    // Dodaj nasłuchiwanie na zdarzenie kliknięcia
    link.addEventListener('click', function (e) {
      e.preventDefault();

      // Pobierz identyfikator elementu docelowego z atrybutu href
      const celId = this.getAttribute('href').substring(1);
      // Znajdź element docelowy po jego identyfikatorze
      const celElement = document.getElementById(celId);

      // Jeśli element docelowy istnieje
      if (celElement) {
        // Animuj przewijanie do elementu docelowego
        gsap.to(window, { duration: 0.5, scrollTo: { y: celElement.offsetTop - 140 } });
      }
    });

    // Dodaj obsługę zdarzenia dotknięcia (touch)
    link.addEventListener('touchstart', function (e) {
      // Zamknij menu mobilne, jeśli jest otwarte
      var menuMobilne = document.querySelector('.wp-block-navigation__responsive-container.is-menu-open');
      menuMobilne.classList.remove('is-menu-open');
      menuMobilne.classList.remove('has-modal-open');

      e.preventDefault();

      // Pobierz identyfikator elementu docelowego z atrybutu href
      const celId = this.getAttribute('href').substring(1);
      // Znajdź element docelowy po jego identyfikatorze
      const celElement = document.getElementById(celId);

      // Pobierz element odpowiedzialny za zamknięcie menu mobilnego
      var wyjscie = document.querySelector('.wp-block-navigation__responsive-container-close');
      // Wywołaj funkcję symulującą zdarzenie dotknięcia
      //triggerTouchEvent(wyjscie);

      // Jeśli element docelowy istnieje
      if (celElement) {
        // Animuj przewijanie do elementu docelowego
        gsap.to(window, { duration: 0.5, scrollTo: { y: celElement.offsetTop - 140 } });
      }
    });
  });
}

// Wywołaj funkcję obsługującą animowany podjazd do kotwicy
animowanyPodjazDoKotwicy();

Dodaj komentarz