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.

Label

{} [+]

Imię*

E-mail

Pole nie wymagane

Label

{} [+]

Imię*

E-mail

Pole nie wymagane

4 komentarzy

Inline Feedbacks

View all comments

Czysty_JS

Powyższy kod zadziała tylko gdy na stronie jest jQuery …

Odpowiedz

Cwany

W odpowiedzi do  Czysty_JS

A kto dzisiaj nie ma jQuery? Zresztą przepisanie na JS 30 sekund

Odpowiedz

Huzar

W odpowiedzi do  Czysty_JS

Albo bez jQuery i bez JS… Wsparcie rośnie więc polecam:
developer.mozilla.org/en-US/docs/Web/CSS/scroll-behavior

Odpowiedz

Amoz

W odpowiedzi do  Czysty_JS

document.querySelectorAll('a[href^="#"]').forEach(anchor => {
    anchor.addEventListener('click', function (e) {
        e.preventDefault();

        document.querySelector(this.getAttribute('href')).scrollIntoView({
            behavior: 'smooth'
        });
    });
});

Odpowiedz