Płynne scrollowanie do odnośnika/kotwicy
4.6 (92%) 15 ocen

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.

4
Dodaj komentarz

avatar
najnowszy najstarszy
Czysty_JS
Czysty_JS

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

Cwany
Cwany

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

Huzar
Huzar

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

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

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

Ta strona korzysta z ciasteczek. Więcej informacji

The cookie settings on this website are set to "allow cookies" to give you the best browsing experience possible. If you continue to use this website without changing your cookie settings or you click "Accept" below then you are consenting to this.

Close