Jak dodać płynne przewijanie do najlepszego efektu w WordPress za pomocą jQuery

Opublikowany: 2022-08-12

Czy chcesz dodać efekt płynnego przewijania u góry strony na swojej stronie WordPress?

Efekt przewijania do góry jest świetny, gdy masz długą stronę i chcesz zapewnić użytkownikom łatwy sposób powrotu na górę. Pomaga poprawić komfort użytkowania Twojej witryny.

W tym artykule pokażemy, jak dodać płynny efekt przewijania do góry w WordPressie za pomocą jQuery i wtyczki.

How to scroll to top effect using jQuery

Co to jest płynne przewijanie i kiedy należy go używać?

O ile witryna nie ma lepkiego menu nagłówka, użytkownicy, którzy przewijają się na dół długiej strony lub postu WordPress, muszą ręcznie przesuwać palcem lub przewijać z powrotem na górę, aby poruszać się po witrynie.

To może być naprawdę irytujące, a często użytkownicy po prostu naciskają przycisk Wstecz i wychodzą. Dlatego potrzebujesz przycisku, który szybko przeniesie użytkowników na górę strony.

Możesz dodać tę funkcjonalność jako prosty link tekstowy bez użycia jQuery, na przykład: 

<a href="#" title="Back to top">^Top</a>

To wyśle ​​użytkowników na górę, przewijając całą stronę w milisekundach. Działa, ale efekt może być irytujący, jak w przypadku uderzenia w wyboj na drodze.

Płynne przewijanie to przeciwieństwo tego. Zsunie użytkownika z powrotem na górę z przyjemnym wizualnie efektem. Korzystanie z takich elementów może znacznie poprawić wrażenia użytkownika w Twojej witrynie.

To powiedziawszy, zobaczmy, jak możesz dodać płynne przewijanie do najwyższego efektu za pomocą wtyczki WordPress i jQuery.

Jak dodać płynny efekt przewijania do góry za pomocą wtyczki WordPress?

Ta metoda jest zalecana dla początkujących, ponieważ możesz dodać efekt przewijania do góry do witryny WordPress bez dotykania ani jednej linii kodu.

Pierwszą rzeczą, którą musisz zrobić, to zainstalować i aktywować wtyczkę WPFront Scroll Top. Jeśli potrzebujesz pomocy, zapoznaj się z naszym przewodnikiem, jak zainstalować wtyczkę WordPress.

Po aktywacji możesz przejść do Ustawienia » Scroll Top z pulpitu WordPress. Tutaj możesz skonfigurować wtyczkę i dostosować efekt płynnego przewijania.

Najpierw musisz kliknąć pole wyboru „Włączone”, aby aktywować przycisk przewijania do góry w swojej witrynie. Następnie zobaczysz opcje edycji przesunięcia przewijania, rozmiaru przycisku, krycia, czasu trwania zanikania, czasu przewijania i innych.

Edit WPfront scroll top settings

Jeśli przewiniesz w dół, znajdziesz więcej opcji, takich jak edycja czasu automatycznego ukrywania, włączenie opcji ukrywania przycisku na małych urządzeniach i ukrywanie go na ekranie wp-admin.

Możesz także edytować działanie przycisku po kliknięciu. Domyślnie przewinie się na górę strony, ale możesz go zmienić, aby przewinąć do określonego elementu w poście, a nawet linku do strony.

Istnieje również możliwość zmiany lokalizacji przycisku. Domyślnie pojawi się w prawym dolnym rogu ekranu, ale możesz również przenieść go do dowolnego z pozostałych rogów.

More edit WPfront scroll top settings

Wtyczka WPFront Scroll Top oferuje również filtry, które wyświetlają przycisk przewijania do góry tylko na wybranych stronach.

Zwykle pojawi się na wszystkich stronach Twojego bloga WordPress. Możesz jednak przejść do sekcji „Wyświetlanie na stronach” i wybrać, gdzie chcesz wyświetlać przewijanie do najwyższego efektu.

Choose where to display the effect

Wtyczka oferuje również gotowe projekty przycisków, z których możesz wybierać. Powinieneś być w stanie łatwo znaleźć projekt pasujący do Twojej witryny.

Jeśli nie możesz znaleźć gotowego przycisku obrazu, który działa dla Ciebie, istnieje możliwość przesłania niestandardowego obrazu z biblioteki multimediów WordPress.

Choose an image button

Kiedy skończysz, po prostu kliknij przycisk „Zapisz zmiany”.

Możesz teraz odwiedzić swoją witrynę, aby zobaczyć, jak działa przycisk przewijania do góry.

Scroll to top button preview

Dodawanie Smooth Scroll do Top Effect za pomocą jQuery w WordPress

Ta metoda nie jest zalecana dla początkujących. Nadaje się dla osób, które są wygodne w edycji motywów, ponieważ obejmuje dodawanie kodu do Twojej witryny.

Użyjemy jQuery, trochę CSS i jednej linii kodu HTML w twoim motywie WordPress, aby dodać efekt górnego płynnego przewijania.

Najpierw otwórz edytor tekstu, taki jak Notatnik, i utwórz plik. Śmiało i zapisz go jako smoothscroll.js .

Następnie musisz skopiować i wkleić ten kod do pliku: 

jQuery(document).ready(function($){
	$(window).scroll(function(){
        if ($(this).scrollTop() < 200) {
			$('#smoothup') .fadeOut();
        } else {
			$('#smoothup') .fadeIn();
        }
    });
	$('#smoothup').on('click', function(){
		$('html, body').animate({scrollTop:0}, 'fast');
		return false;
		});
});

Następnie możesz zapisać plik i przesłać go do folderu /js/ w katalogu motywów WordPress. Aby uzyskać więcej informacji, zapoznaj się z naszym przewodnikiem dotyczącym korzystania z FTP do przesyłania plików do WordPress.

Jeśli Twój motyw nie ma katalogu /js/ , możesz go utworzyć i wgrać do niego smoothscroll.js . Możesz również zapoznać się z naszym przewodnikiem po plikach WordPress i strukturze katalogów, aby uzyskać więcej informacji.

Ten kod to skrypt jQuery, który doda efekt płynnego przewijania do przycisku, który przenosi użytkowników na górę strony.

Następną rzeczą, którą musisz zrobić, to załadować plik smoothscroll.js do swojego motywu. W tym celu umieścimy skrypt w kolejce w WordPressie.

Następnie po prostu skopiuj i wklej ten kod do pliku functions.php motywu. Nie zalecamy bezpośredniej edycji plików motywu, ponieważ najmniejszy błąd może zepsuć witrynę. Zamiast tego możesz użyć wtyczki, takiej jak WPCode i postępować zgodnie z naszym samouczkiem, jak dodawać niestandardowe fragmenty kodu w WordPress. 

wp_enqueue_script( 'smoothup', get_template_directory_uri() . 'https://cdn2.wpbeginner.com/js/smoothscroll.js', array( 'jquery' ), '',  true );

W powyższym kodzie powiedzieliśmy WordPressowi, aby załadować nasz skrypt, a także załadować bibliotekę jQuery, ponieważ nasza wtyczka od niej zależy.

Teraz, gdy dodaliśmy część jQuery, dodajmy rzeczywisty link do naszej witryny WordPress, który przenosi użytkowników z powrotem na górę. Po prostu wklej ten kod HTML w dowolnym miejscu w pliku footer.php motywu. Jeśli potrzebujesz pomocy, zapoznaj się z naszym samouczkiem na temat dodawania kodu nagłówka i stopki w WordPress. 

<a href="#top" id="smoothup" title="Back to top"></a>

Być może zauważyłeś, że kod HTML zawiera link, ale nie zawiera tekstu kotwicy. Dzieje się tak, ponieważ użyjemy ikony obrazu ze strzałką w górę, aby wyświetlić przycisk z powrotem do góry.

W tym przykładzie używamy ikony 40x40px. Po prostu dodaj poniższy niestandardowy kod CSS do arkusza stylów swojego motywu.

W tym kodzie używamy ikony obrazu jako obrazu tła przycisku i ustawiamy go w stałej pozycji. Dodaliśmy również małą animację CSS, która obraca przycisk, gdy użytkownik najedzie na niego myszą. 

#smoothup {
height: 40px;
width: 40px;
position:fixed;
bottom:50px;
right:100px;
text-indent:-9999px;
display:none;
background: url("https://www.example.com/wp-content/uploads/2013/07/top_icon.png");
-webkit-transition-duration: 0.4s;
-moz-transition-duration: 0.4s; transition-duration: 0.4s;
}

#smoothup:hover {
-webkit-transform: rotate(360deg) }
background: url('') no-repeat;
}

W powyższym CSS upewnij się, że zastępujesz https://www.example.com/wp-content/uploads/2013/07/top_icon.png URL obrazu, którego chcesz użyć. Możesz przesłać własną ikonę obrazu za pomocą narzędzia do przesyłania multimediów WordPress, skopiować adres URL obrazu, a następnie wkleić go do kodu.

Mamy nadzieję, że ten artykuł pomógł Ci dodać płynne przewijanie do najlepszego efektu w Twojej witrynie za pomocą jQuery. Możesz również zobaczyć nasz ekspercki wybór najlepszych wtyczek WordPress dla małych firm i nasz przewodnik krok po kroku, jak założyć sklep internetowy.

Jeśli podobał Ci się ten artykuł, zasubskrybuj nasz kanał YouTube dla samouczków wideo WordPress. Możesz nas również znaleźć na Twitterze i Facebooku.