Poprzedni kod przesta\u0142 mi dzia\u0142a\u0107 z jakim\u015b updatem, okaza\u0142o si\u0119 \u017ce offsetTop nie zwraca\u0142 prawid\u0142owej warto\u015bci zosta\u0142o to zmienione na funckje pomocnicz\u0105 getOffsetTop kt\u00f3ra oblicza realn\u0105 odleg\u0142o\u015b\u0107.<\/p>\n\n\n\n
function triggerTouchEvent(element) {\n if (!element) {\n console.error('Invalid element provided');\n return;\n }\n\n \/\/ Create a new touch event\n var touch = new Touch({\n identifier: Date.now(),\n target: element,\n clientX: 0,\n clientY: 0,\n pageX: 0,\n pageY: 0,\n screenX: 0,\n screenY: 0,\n });\n\n var touchEvent = new TouchEvent('touchstart', {\n bubbles: true,\n cancelable: true,\n composed: true,\n touches: [touch],\n targetTouches: [touch],\n changedTouches: [touch],\n });\n\n \/\/ Dispatch the touch event on the element\n element.dispatchEvent(touchEvent);\n}\n\n\n\n\nfunction getOffsetTop(element) {\n var offsetTop = 0;\n while (element) {\n offsetTop += element.offsetTop;\n element = element.offsetParent;\n }\n return offsetTop;\n}\n\n\n\n\n\/\/ Nadaj klase na scoll to do animacji element\u00f3w\n\nfunction odslonElementy() {\n var odslaniane = document.querySelectorAll(\".animowane\");\n\n for (var i = 0; i < odslaniane.length; i++) {\n var windowHeight = window.innerHeight;\n var elementTop = odslaniane[i].getBoundingClientRect().top;\n var elementVisible = 150;\n\n if (elementTop < windowHeight - elementVisible) {\n odslaniane[i].classList.add(\"anim-ctive\");\n } else {\n odslaniane[i].classList.remove(\"anim-active\");\n }\n }\n}\n\nwindow.addEventListener(\"scroll\", odslonElementy);\n\n\n\n\n\/\/ Funkcja obs\u0142uguj\u0105ca animowany podjazd do kotwicy\nfunction animowanyPodjazDoKotwicy() {\n \/\/ Znajd\u017a wszystkie linki w nawigacji\n const nawigacjaLinki = document.querySelectorAll('nav a.wp-block-navigation-item__content');\n\n \/\/ Dla ka\u017cdego znalezionego linka\n nawigacjaLinki.forEach(function (link) {\n \/\/ Dodaj nas\u0142uchiwanie na zdarzenie klikni\u0119cia\n link.addEventListener('click', function (e) {\n e.preventDefault();\n\n \/\/ Pobierz identyfikator elementu docelowego z atrybutu href\n const celId = this.getAttribute('href').substring(1);\n \/\/ Znajd\u017a element docelowy po jego identyfikatorze\n const celElement = document.getElementById(celId);\n \n console.log(celElement);\n\n console.log(getOffsetTop(celElement));\n \n \/\/ Je\u015bli element docelowy istnieje\n if (celElement) {\n \/\/ Animuj przewijanie do elementu docelowego\n gsap.to(window, {\n duration: 0.5,\n scrollTo: {\n y: getOffsetTop(celElement) - 140\n }\n });\n }\n });\n\n \/\/ Dodaj obs\u0142ug\u0119 zdarzenia dotkni\u0119cia (touch)\n link.addEventListener('touchstart', function (e) {\n \/\/ Zamknij menu mobilne, je\u015bli jest otwarte\n var menuMobilne = document.querySelector('.wp-block-navigation__responsive-container.is-menu-open');\n menuMobilne.classList.remove('is-menu-open');\n menuMobilne.classList.remove('has-modal-open');\n\n e.preventDefault();\n\n \/\/ Pobierz identyfikator elementu docelowego z atrybutu href\n const celId = this.getAttribute('href').substring(1);\n \/\/ Znajd\u017a element docelowy po jego identyfikatorze\n const celElement = document.getElementById(celId);\n\n \/\/ Pobierz element odpowiedzialny za zamkni\u0119cie menu mobilnego\n var wyjscie = document.querySelector('.wp-block-navigation__responsive-container-close');\n \/\/ Wywo\u0142aj funkcj\u0119 symuluj\u0105c\u0105 zdarzenie dotkni\u0119cia\n triggerTouchEvent(wyjscie);\n\n \/\/ Je\u015bli element docelowy istnieje\n if (celElement) {\n \/\/ Animuj przewijanie do elementu docelowego\n gsap.to(window, {\n duration: 0.5,\n scrollTo: {\n y: getOffsetTop(celElement) -140\n }\n });\n }\n });\n });\n}\n\n\/\/ Wywo\u0142aj funkcj\u0119 obs\u0142uguj\u0105c\u0105 animowany podjazd do kotwicy\nanimowanyPodjazDoKotwicy();\n<\/code><\/pre>\n\n\n\nUpdate<\/h2>\n\n\n\n
Tworzenie animowanego scrolla do kotwicy na stronach WordPress mo\u017ce znacznie poprawi\u0107 do\u015bwiadczenie u\u017cytkownik\u00f3w, zw\u0142aszcza na urz\u0105dzeniach mobilnych. Poni\u017cej przedstawiamy, jak skonfigurowa\u0107 t\u0119 funkcj\u0119, u\u017cywaj\u0105c bibliotek GSAP i ScrollToPlugin.<\/p>\n\n\n\n
Wprowadzenie<\/h2>\n\n\n\n
Aby zrealizowa\u0107 animowany scroll do kotwicy, nale\u017cy w\u0142\u0105czy\u0107 odpowiednie skrypty w pliku functions.php<\/code>:<\/p>\n\n\n\nfunctions.php<\/h2>\n\n\n\n wp_enqueue_script('gsap', 'https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/gsap\/3.12.2\/gsap.min.js', array(), '1.0', true);\n wp_enqueue_script('scrolltoplugin', 'https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/gsap\/3.12.2\/ScrollToPlugin.min.js', array(), '1.0', true);<\/code><\/pre>\n\n\n\nSkrypt JavaScript<\/h2>\n\n\n\n
Nast\u0119pnie, u\u017cyjemy poni\u017cszego skryptu, aby doda\u0107 funkcjonalno\u015b\u0107 animowanego przewijania:<\/p>\n\n\n\n
\n\n\/\/ Funkcja obs\u0142uguj\u0105ca animowany podjazd do kotwicy\nfunction animowanyPodjazDoKotwicy() {\n \/\/ Znajd\u017a wszystkie linki w nawigacji\n const nawigacjaLinki = document.querySelectorAll('nav a.wp-block-navigation-item__content');\n\n \/\/ Dla ka\u017cdego znalezionego linka\n nawigacjaLinki.forEach(function (link) {\n \/\/ Dodaj nas\u0142uchiwanie na zdarzenie klikni\u0119cia\n link.addEventListener('click', function (e) {\n e.preventDefault();\n\n \/\/ Pobierz identyfikator elementu docelowego z atrybutu href\n const celId = this.getAttribute('href').substring(1);\n \/\/ Znajd\u017a element docelowy po jego identyfikatorze\n const celElement = document.getElementById(celId);\n\n \/\/ Je\u015bli element docelowy istnieje\n if (celElement) {\n \/\/ Animuj przewijanie do elementu docelowego\n gsap.to(window, { duration: 0.5, scrollTo: { y: celElement.offsetTop - 140 } });\n }\n });\n\n \/\/ Dodaj obs\u0142ug\u0119 zdarzenia dotkni\u0119cia (touch)\n link.addEventListener('touchstart', function (e) {\n \/\/ Zamknij menu mobilne, je\u015bli jest otwarte\n var menuMobilne = document.querySelector('.wp-block-navigation__responsive-container.is-menu-open');\n menuMobilne.classList.remove('is-menu-open');\n menuMobilne.classList.remove('has-modal-open');\n\n e.preventDefault();\n\n \/\/ Pobierz identyfikator elementu docelowego z atrybutu href\n const celId = this.getAttribute('href').substring(1);\n \/\/ Znajd\u017a element docelowy po jego identyfikatorze\n const celElement = document.getElementById(celId);\n\n \/\/ Pobierz element odpowiedzialny za zamkni\u0119cie menu mobilnego\n var wyjscie = document.querySelector('.wp-block-navigation__responsive-container-close');\n \/\/ Wywo\u0142aj funkcj\u0119 symuluj\u0105c\u0105 zdarzenie dotkni\u0119cia\n \/\/triggerTouchEvent(wyjscie);\n\n \/\/ Je\u015bli element docelowy istnieje\n if (celElement) {\n \/\/ Animuj przewijanie do elementu docelowego\n gsap.to(window, { duration: 0.5, scrollTo: { y: celElement.offsetTop - 140 } });\n }\n });\n });\n}\n\n\/\/ Wywo\u0142aj funkcj\u0119 obs\u0142uguj\u0105c\u0105 animowany podjazd do kotwicy\nanimowanyPodjazDoKotwicy();\n<\/code><\/pre>\n\n\n\nDzi\u0119ki tym krokom, Twoje strony b\u0119d\u0105 wygl\u0105da\u0107 bardziej profesjonalnie i b\u0119d\u0105 bardziej przyjazne u\u017cytkownikom mobilnym.<\/p>\n\n\n\n
\n\n\n\nProsta wersja bez bibliotek nie zawsze dzia\u0142a na mobile<\/h2>\n\n\n\n
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();<\/p>\n","protected":false},"excerpt":{"rendered":"
Dowiedz si\u0119, jak stworzy\u0107 animowany scroll do kotwicy JS dzia\u0142aj\u0105cy na urz\u0105dzeniach mobilnych dla motyw\u00f3w WordPress z edytorem blok\u00f3w. Sprawd\u017a nasz przewodnik!<\/p>\n","protected":false},"author":1,"featured_media":563,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[268],"tags":[221,214,223,31,219,152,222,48,220,13],"class_list":["post-216","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-nawigacja","tag-animowany-scroll","tag-edytor-blokow","tag-gsap","tag-js","tag-kotwica","tag-mobilne-menu","tag-motywy-wordpress","tag-nawigacja","tag-scrolltoplugin","tag-wordpress"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/projektninja.com\/devblog\/wp-json\/wp\/v2\/posts\/216","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/projektninja.com\/devblog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/projektninja.com\/devblog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/projektninja.com\/devblog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/projektninja.com\/devblog\/wp-json\/wp\/v2\/comments?post=216"}],"version-history":[{"count":3,"href":"https:\/\/projektninja.com\/devblog\/wp-json\/wp\/v2\/posts\/216\/revisions"}],"predecessor-version":[{"id":780,"href":"https:\/\/projektninja.com\/devblog\/wp-json\/wp\/v2\/posts\/216\/revisions\/780"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/projektninja.com\/devblog\/wp-json\/wp\/v2\/media\/563"}],"wp:attachment":[{"href":"https:\/\/projektninja.com\/devblog\/wp-json\/wp\/v2\/media?parent=216"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/projektninja.com\/devblog\/wp-json\/wp\/v2\/categories?post=216"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/projektninja.com\/devblog\/wp-json\/wp\/v2\/tags?post=216"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}