Płynne scrollowanie do odnośnika/kotwicy
Witam.
Właśnie rozpocząłem swoją pierwszą pracę jako Web developer. Jednym z moich zadań jest wykonywanywanie zmian i optymalizacje stron opartych o WP. Właśnie siadłem do pierwszego takiego zadania i od razu pojawił się dla mnie spory problem. Na blogu, w normalnym wpisie są zawarte coś ‚ala’ odnośniki. Poczytałem i są to kotwice / odwołania do dalszej części tekstu. Za zadanie mam zrobić im płynne przewijanie, bo teraz po kliknięciu w taki link przenosi on co prawda w odpowiednie miejsce, ale następuje takie ’tąpnięcie’.
Dzieje się to odrazu po kliknięciu. Kolejnym ‚problemem’ dla mnie jest fakt, że muszę to zrobić na kilkunastu podstronach i dodawanie ręcznie klasy zarówno do odnośnika kierującego jak i do odpowiedniego miejsca będzie uciążliwe. Wie ktoś jak to zrobić (to płynne przewinięcie) i jakoś globalnie wykryć gdzie są takie odnośniki i wszędzie wdrożyć za jednym zamachem? Samego WordPressa od strony jego silnika znam na podstawowym poziomie.
Przyklejona odpowiedź
Sposobów na wykonanie takiego zadania jest wiele. Przedstawmy ten (chyba) najprostszy. Przede wszystkim zrób research w plikach motywu. Nie napisałeś jaki posiada strona nad którą działasz więc ciężko Ci podpowiedzieć. Musisz odnaleźć lub utworzyć plik z javascriptami. Zajrzyj do źródła strony (Ctrl + U lub prawym myszy i zbadaj element), wyszukaj (Ctrl + F) pliki z rozszerzeniem „.js”. Pewnie większość z nich będzie dotyczyła zainstalowanych pluginów bądź elementów motywu, ale powinien być tam też jakiś plik customowy. Po znalezieniu / utworzeniu pliku ze skryptami dodaj następujący kod:
jQuery('a').click(function($){ $('html, body').animate({ scrollTop: $( $(this).attr('href') ).offset().top }, 500); return false; });
Powyższy kod znajduje atrybuty linku które mają hasha, następnie animuje okno do miejsca gdzie znajduje ich name.
Przykładowo – dodajesz odnośnik/kotwicę:
<a href="#content">Punkt A</a>
Następnie umieszczasz na tej samej podstronie miejsce docelowe:
<div id="content">Punkt B</div>
W ten sposób po kliknięciu w punkt A okno przeglądarki zostanie płynnie ( w 0.5s) przeskrolowane do punktu B.

Powyższy kod zadziała tylko gdy na stronie jest jQuery …
A kto dzisiaj nie ma jQuery? Zresztą przepisanie na JS 30 sekund
Albo bez jQuery i bez JS… Wsparcie rośnie więc polecam:
developer.mozilla.org/en-US/docs/Web/CSS/scroll-behavior