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

Czy widziałeś strony internetowe, które dodają płynne przewijanie do góry strony? Jest to świetne, gdy masz długą stronę i chcesz dać swoim użytkownikom łatwy sposób na powrót na górę. Niedawno jeden z naszych czytelników zapytał nas o dodanie płynnego przewijania do efektu top w WordPress. W tym artykule pokażemy, jak dodać płynne przewijanie do efektu top w WordPress za pomocą jQuery.

Uwaga: Ten samouczek jest stworzony dla średniozaawansowanego użytkownika DIY, który wygodnie edytuje swoje motywy. Jeśli chcesz użyć metody wtyczki, użyj płynnego przewijania strony do góry wtyczki. Dla tych, którzy chcą dowiedzieć się, jak to zrobić bez wtyczki, następnie proszę kontynuować czytanie.

Co To jest Smooth Scroll i kiedy go używać?

Gdy strona lub post ma wiele treści, użytkownicy są zmuszeni do przewinięcia w dół, aby przeczytać te treści. Gdy użytkownicy przewijają w dół, wszystkie linki nawigacyjne idą w górę. Gdy użytkownicy zakończą czytanie tego artykułu, muszą przewinąć w górę, aby zobaczyć, co jeszcze zrobić w Twojej witrynie. Przycisk przewiń do góry szybko wysyła użytkowników na górę strony. Możesz dodać to jako link tekstowy bez użycia jQuery, jak to:

<a href="#"title = "powrót na górę" >^Top < / A>

Po prostu wysyła użytkowników na górę strony i przewija całą stronę w milisekundach. Jest funkcjonalny, ale trochę jak wybój na drodze. Smooth scroll jest przeciwieństwem tego. Płynnie przesuwa użytkownika na górę strony. Tworzy to ładny efekt i poprawia wrażenia użytkownika.

Dodawanie płynnego przewijania do efektu Top z jQuery w WordPress

Aby dodać płynne przewijanie do efektu top, będziemy używać jQuery, trochę CSS i pojedynczej linii kodu HTML w Twoim motywie WordPress. Najpierw otwórz edytor tekstu, taki jak Notatnik. Utwórz plik i zapisz go jako smoothscroll.js. Skopiuj i wklej ten kod do pliku:

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

Zapisz plik i prześlij go do katalogu motywów WordPress / js/ folder (zobacz jak używać FTP do przesyłania plików do WordPress). Jeśli twój motyw nie ma / js/ katalogu, następnie utwórz go i wgraj smoothscroll.js do niego. 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 dodać smoothscroll.js do twojego tematu. Aby to zrobić dobrze, zapytamy o skrypt w WordPress (dowiedz się więcej w naszym przewodniku na temat prawidłowego dodawania skryptów w WordPress). Skopiuj i wklej ten kod do motywu funkcje.php plik.

wp_enqueue_script ('smoothup', get_template_directory_uri (). '/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 tego zależy. Teraz, gdy dodaliśmy część jQuery, pozwala dodać rzeczywisty link do naszej witryny WordPress, która przenosi użytkowników z powrotem na górę. Wklej ten HTML w dowolnym miejscu w swoim motywie stopka.php plik.

<a href=" # top"id=" smoothup"title = "powrót na górę" ></a>

Jak zauważyłeś, dodaliśmy link, ale nie podlinkowaliśmy go do żadnego tekstu. To dlatego, że będziemy używać ikony obrazu ze strzałką w górę, aby wyświetlić przycisk Powrót do góry. W tym przykładzie używamy ikony 40x40px. Dodaj to do arkusza stylów szablonu.

/ smoothup { 
wysokość: 40px; 
width: 40px; 
pozycja: stała;
/ width = 50px / ;
/ align = "left" / 100px;
text-indent: - 9999px;
Wyświetlacz: Brak;
background: url("https://www.example.com/wp-content/uploads/2013/07/top_icon.png"); 
- WebKit-Przejście-czas trwania: 0,4 s; 
- moz-czas przejścia: 0,4 s; czas przejścia: 0,4 s; 
}

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

W powyższym CSS użyliśmy stałej pozycji dla naszej ikony obrazu i użyliśmy ikony obrazu jako obrazu tła. Możesz przesłać ikonę obrazu za pomocą WordPress media uploader, a następnie uzyskać adres URL obrazu, aby wkleić go jako url tła. Dodaliśmy również trochę animacji CSS do przycisku, który obraca przycisk, gdy użytkownik przejmie nad nim kursor.

Efekt przewiń do góry pozwala użytkownikom wrócić na górę i znaleźć inne rzeczy do zrobienia w swojej witrynie. Inną rzeczą, którą możesz zrobić, to dodać pływający pasek stopki, taki jak mamy na naszej stronie, aby wyświetlić polecane treści. Jeśli nie chcesz, aby Twoi użytkownicy przewijali się do góry, aby udostępnić swój artykuł, zdecydowanie zalecamy użycie wtyczki floating social share bar, takiej jak my na WPBeginner.

Mamy nadzieję, że ten artykuł pomógł Ci dodać płynne przewijanie do góry strony w Twojej witrynie za pomocą jQuery. Aby zobaczyć inne fajne zastosowania jQuery w WordPress, możesz spojrzeć na nasz artykuł Akordeon FAQ jQuery lub artykuł leniwe ładowanie obrazów.

Czy uważasz, że efekt przewijania do góry jest przydatny? Daj nam znać, zostawiając komentarz poniżej.