Najlepsze darmowe wtyczki WordPress Smooth Scroll 2022
Opublikowany: 2021-11-09Jeśli utworzyłeś witrynę, ale zawartość witryny jest zbyt długa, co jest trudne do zrozumienia w tej sytuacji, możesz skorzystać z wtyczek WordPress Smooth Scroll.
Wtyczki WordPress Smooth scroll pomogą Ci bardzo płynnie przewijać stronę do góry i do dołu. Nie tylko poprawi to wygodę korzystania z witryny, ale także wpłynie znacząco na współczynnik konwersji. Ponieważ Twój użytkownik będzie dłużej zaangażowany na Twojej stronie.
Jak dodać płynne przewijanie do najlepszego efektu w WordPress za pomocą jQuery?
Zastanawiasz się, dlaczego różne inne strony internetowe mają efekt płynnego przewijania na górę strony? Idealnie nadaje się do dodania efektu płynnego przewijania u góry, jeśli masz długą stronę.
Pomaga to poprawić wrażenia użytkownika na Twojej stronie, a jednocześnie ułatwia mu szybki powrót na górę.
Teraz pytanie brzmi, jak dodać płynne przewijanie do najwyższego efektu w swojej witrynie WordPress? Cóż, możesz to łatwo zrobić za pomocą jQuery. Tutaj porozmawiamy o tym, jak łatwo to zrobić za pomocą jQuery. Czytaj:
Co to jest płynne przewijanie i kiedy go używać?
Jeśli strona lub post zawiera dużo treści, użytkownicy muszą przewinąć w dół, aby przeczytać je wszystkie. Gdy użytkownicy zaczynają przewijać w dół, Twoje linki nawigacyjne zaczynają rosnąć.
Gdy użytkownik skończy czytać, musi przewinąć, aby zobaczyć, czy coś mu zostało. Przewijanie do górnego przycisku pozwala czytelnikowi szybko przejść do operacji. Możesz zdecydować się na dodanie tego linku tekstowego bez konieczności używania jQuery.
<a href="#" title="Powrót do góry">^Do góry</a>
Wyśle czytelników na górę strony, przewijając w górę w ciągu ułamka sekundy. Działa jako funkcjonalny.
Jednak płynne przewijanie jest przeciwieństwem tego. Płynne przewijanie pomaga użytkownikowi przesunąć się z powrotem do górnego obszaru strony. Pomaga to poprawić wrażenia użytkowników w Twojej witrynie.
Dodanie Smooth Scroll do najlepszego efektu za pomocą jQuery w WordPressie?
Jeśli chcesz dodać płynne przewijanie do najwyższego efektu, możesz użyć jQuery. Jednocześnie będziesz musiał dodać trochę CSS wraz z pojedynczą linią kodu HTML w motywie WordPressa.
Aby zacząć od tego najpierw musisz otworzyć edytor tekstu, taki jak Notatnik. Teraz musisz stworzyć plik i śmiało zapisać go jako smoothscroll.js. Teraz musisz skopiować i wkleić kod do obszaru pliku:
jQuery(dokument).gotowy(funkcja($){ $(okno).scroll(funkcja(){ if ($(this).scrollTop() < 200) { $('#smoothup') .fadeOut(); } w przeciwnym razie { $('#smoothup') .fadeIn(); } }); $('#smoothup').on('klik', function(){ $('html, body').animate({scrollTop:0}, 'szybko'); zwróć fałsz; }); });
Teraz musisz zapisać plik. Następnie możesz przesłać go do katalogu /js /folder katalogu motywów WordPress. Jeśli twój motyw nie ma katalogu / js/, musisz zacząć od jego utworzenia.
Następnie możesz wgrać smoothscroll.js do tego katalogu. Ten kod jest określany jako skrypt jQuery, który doda do przycisku efekt płynnego przewijania. Zasadniczo pomoże użytkownikowi płynnie przejść na górę strony.
Następnie musisz dodać ten smoothscroll.js do swojego obszaru tematycznego. Jeśli chcesz to zrobić, musisz dodać skrypt w WordPressie. Oto skrypt lub kod, który musisz wkleić do pliku functions.php swojego motywu:
wp_enqueue_script('smooth up', get_template_directory_uri() . '/js/smoothscroll.js', array('jquery' ), ”, true );
Ten kod wysyła do WordPressa polecenie skryptu. Jednocześnie informuje również WordPress, aby załadował bibliotekę jQuery, ponieważ wtyczka jest od niej zależna.
Tak jak skończyłeś z dodawaniem części jQuery, teraz musisz dodać właściwy link do strony wordpress, który przeniesie użytkownika z powrotem do górnego obszaru. Musisz wkleić kod HTML w dowolnym miejscu w pliku footer.php swojego motywu:
<a href="#top" title="Powrót do góry"></a>
Ten krok obejmuje dodanie linku do pliku, ale nie jest on połączony z żadnym tekstem. Dzieje się tak, ponieważ musisz użyć ikony obrazu do strzałki w górę, która umożliwi wyświetlenie przycisku z powrotem do góry.
Oto jak dodać ikonę 40x40px do arkusza stylów swojego motywu:
#smoothup { wysokość: 40px; szerokość: 40px; pozycja:stała; dół:50px; prawo:100px; wcięcie tekstu:-9999px; Nie wyświetla się; background: url("http://www.example.com/wp-content/uploads/2013/07/top_icon.png"); -czas trwania przejścia na webkit: 0,4 s; -moz-czas trwania przejścia: 0,4s; czas trwania przejścia: 0,4s; } #smoothup:najedź { -transformacja webkit: rotacja(360deg) } tło: url('') bez powtórzeń; }
We wspomnianym powyżej CSS zdecydowałeś się na zamrożenie pozycji ikony obrazu. Obejmuje również użycie ikony obrazu jako obrazu tła. Teraz musisz przesłać ikonę obrazu za pomocą programu do przesyłania multimediów WordPress.
Następnie możesz uzyskać adres URL obrazu, który musisz wkleić jako adres URL tła. Ponieważ dodałeś animację CSS do przycisku, który ciągle obraca przycisk, użytkownik trzyma wskaźnik myszy nad przyciskiem.
Teraz musisz przewinąć do górnego efektu, który pozwoli użytkownikom wrócić do górnego obszaru i dowiedzieć się, co jeszcze mogą zrobić w Twojej witrynie.
Możesz również dodać pływającą stopkę z powrotem, aby zawartość funkcji była łatwa do wyświetlenia. Jeśli nie chcesz, aby użytkownicy przewijali do górnego obszaru, aby udostępnić artykuł, możesz użyć wtyczki pływającego paska udostępniania społecznościowego, aby znacznie łatwiej było nim zarządzać.
Wtyczki Smooth Scroll z 2022 r. – bardzo lekkie i szybkie
Wtyczki WordPress Smooth Scroll z pewnością będą działać znacznie szybciej i skuteczniej na wszystkich innych urządzeniach i przeglądarkach bez żadnych trudności.
Ponadto działa świetnie z innymi wtyczkami, takimi jak Yoast SEO, Contact Form 7, NextGen Gallery, Slider Revolution, WooCommerce, narzędzia do tworzenia stron SKT, Visual Composer i Elementor i wiele innych.
Witryny biznesowe na dużą lub małą skalę, takie jak blog, witryna portfolio, witryna doradcza, witryna korporacyjna, witryna związana z handlem elektronicznym, agencja kreatywna, witryna nieruchomości, osobiste CV, witryna firmy detalicznej itp. Mogą korzystać z wtyczek WordPress Smooth Scroll do ulepszania wygląd i styl strony.
Dostępnych jest wiele darmowych wtyczek WordPress Scroll, ale wyróżniliśmy większość wtyczek Smooth Scroll, które pokochają wszyscy odwiedzający. Sprawdź poniżej.
1. Przewiń stronę do id :


Przewijanie strony do id to oprogramowanie typu open source, które jest w pełni scharakteryzowane i wyposażone w dobrze rozwinięte funkcje i funkcje. Daje płynny efekt animacji przewijania.
Przewijanie strony do wtyczki id jest regulowane. Z pomocą wspomnianych id i offset wtyczka obliczy rozmiar strony i ustawi ją automatycznie.
2. Sticky Menu (lub cokolwiek!) na Scroll :

Przyklejone menu (lub cokolwiek) we wtyczce przewijania jest dostępne bezpłatnie. pomaga przyklejać menu lub dowolny element. Po kliknięciu przyklejonego elementu zostaniesz bezpośrednio przewinięty na górę strony. Potrzebowałeś tylko kilku lub podstawowej wiedzy na temat HTML/CSS, aby po prostu wyjąć właściwy element, który chcesz przykleić.
3. WordPress Infinite Scroll – Ajax Załaduj więcej :

Ajax Load more jest specjalnie stworzony dla użytkownika WordPressa, aby mógł płynnie przewijać stronę. Ajax load more pomaga załadować leniwe posty, pojedyncze posty, strony i komentarze. Te wtyczki są najbardziej znane z wtyczek eCommerce, takich jak WooCommerce
4. Łatwe płynne przewijanie łączy:

Możesz samodzielnie utworzyć funkcję od dołu do góry. ponieważ SEasy Smooth Scroll Links to konfigurowalna i bardzo lekka wtyczka.
Wystarczy wybrać dowolny z obrazów, aby ustawić elementy przewijania. Możesz także dostosować położenie elementu do lewej, środkowej, prawej strony. Ta wtyczka jest również oprogramowaniem typu open source.
5. Płynne przewijanie kółkiem myszy:

Wtyczka MouseWheel Smooth Scroll bardzo płynnie przewija wszystkie linki kotwiczne. Zwykle umieszcza się go po prawej stronie, co powoduje przewijanie strony od dołu do góry.
Dlatego ta wtyczka obsługuje RTL i nie tworzy bezużytecznych pozycji menu na pulpicie WordPress.
6. Płynne przewijanie według WPOS:

Ponieważ wtyczka Smooth Scroll by WPOS jest lekka, można łatwo dostosować przewijanie od góry do dołu na każdej stronie. Nie musisz pisać nawet jednej linii kodu.
Można dostosować szybkość animacji, typ, wysokość, szerokość itp. Zgodnie z potrzebami. Ta wtyczka działa lepiej z kreatorem stron Elementor
7. Prosty przycisk przewijania do góry:

Można dodać efekt płynnego przewijania do linku kotwicy, ale na tej samej stronie. Efekty te można zastosować do całych postów i strony lub do poszczególnych postów i stron. Możesz znaleźć to ustawienie w ustawieniach pulpitu nawigacyjnego >> Prosty przycisk przewijania do góry.
– Wybierz, aby ubiegać się o wszystkie posty i strony
– Wybierz tylko stronę główną
– Wybierz tylko konkretne strony
– Wybierz tylko konkretne posty
– Zdecyduj o szybkości przewijania
8. NS Płynne przewijanie do góry:

Surbma ma więcej aktywnych użytkowników. Ponieważ ta wtyczka jest również płynnym przewijaniem. Możesz uzyskać efekt na każdym linku do kotwicy na swojej stronie. Efekt płynnego przewijania można dodać do menu lub dowolnej części nawigacji.
Nie musisz go nawet dostosowywać, ponieważ nie ma opcji dla tej wtyczki. Jeśli masz wiedzę i doświadczenie na temat programowania JavaScript i WordPress, możesz wprowadzić pewne zmiany zgodnie ze swoimi potrzebami. Ale jeśli nie masz, sugeruję, abyś tego nie dotykał. ponieważ zacznie działać natychmiast po zainstalowaniu.
9. WPFPrzewiń górny:

Możesz łatwo przewijać od dołu do góry za pomocą wtyczki WPFront Scroll Top. Jest w pełni konfigurowalny z różnymi opcjami do wyboru. Z pewną animacją zostanie przewinięty z powrotem do góry.
Możesz samodzielnie tworzyć tekst, obrazy i przyciski. możesz także filtrować strony i posty.
10. Złap nieskończony zwój:

Zwój Catch Infinite pomoże Ci zwiększyć zaangażowanie użytkowników w Twojej witrynie. Głównym powodem tego jest nieskończony zwój Jetpack. Po zainstalowaniu i aktywowaniu wtyczek klient i użytkownik będą mogli przewijać stronę witryny.
To wszystko są najlepsze darmowe wtyczki WordPress Smooth Scroll 2022.