Ustaw prędkość przewijania strony w przypadku użycia kotwicy.

1 lutego, 2024
2:12 pm

Ustawienie prędkości przewijania strony w momencie, kiedy budujemy landing page i chcemy, aby przewijanie strony korzystając z widżetu kotwicy nie odbywało się w tak dynamiczny sposób, ma na to rozwiązanie. Dość prosty i łatwy w użyciu kod JS, który pomoże nam poprawić i zwolnić efekt przewijania strony. Oczywiście, działa to też w drugą stronę, jeśli chcemy przyspieszyć przewijanie, ustawiamy dedykowaną (niższą) wartość, która spowoduje, że strona będzie przewijać się szybciej. Zastosowanie działa w oparciu o wykorzystanie Elementor, widżetu kotwicy oraz widżetu HTML. Widżet HTML dodajemy w dowolnym miejscu na stronie i wklejamy do niego poniższy kod:

<script>
jQuery(document).ready(function( $ ){
    $('a[href*="#"]:not([href="#"])').click(function() {
        if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
            var target = $(this.hash);
            target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
            if (target.length) {
                $('html,body').animate({
                    scrollTop: target.offset().top
                }, 1000); // Możesz zmienić 1000 (ms) na dowolną wartość, aby kontrolować szybkość przewijania
                return false;
            }
        }
    });
});
</script>

jQuery(document).ready(function( $ ){...});: Ten fragment kodu oznacza, że cały wewnętrzny kod JavaScript zostanie wykonany dopiero po załadowaniu całego modelu DOM strony. Pozwala to na bezpieczne manipulowanie elementami strony, ponieważ upewnia się, że wszystkie elementy są już dostępne.

$('a[href*="#"]:not([href="#"])'): Ten selektor jQuery szuka wszystkich linków (<a>), które zawierają w swoim atrybucie href znak #, ale nie są to linki, które prowadzą wyłącznie do # (co często jest używane jako placeholder). Selektor ten pomija więc linki, które nie przewijają do konkretnego miejsca na stronie.
.click(function() {...}): Jest to zdarzenie, które wykonuje zawarty kod, gdy użytkownik kliknie na link pasujący do wcześniej określonego selektora.
$(this.hash) odnajduje element, do którego odnosi się kotwica. this.hash zwraca wartość href klikniętego linka, ale tylko część po #, która jest identyfikatorem elementu docelowego.
target = target.length ? target : $('[name=' + this.hash.slice(1) +']'); sprawdza, czy znaleziono element docelowy. Jeśli nie, próbuje znaleźć element po atrybucie name równym wartości hash.

$('html,body').animate({...}, 1000);: Ta linia kodu powoduje animowane przewijanie dokumentu do pozycji elementu docelowego. scrollTop: target.offset().top określa, że dokument ma zostać przewinięty tak, aby górna krawędź elementu docelowego znalazła się na samej górze okna przeglądarki. Wartość 1000 określa czas trwania animacji w milisekundach.