Wyświetlanie przycisku scrollowania do góry strony na WP

Cześć. Potrzebuję lekkiej wtyczki, która pozwoli mi dodać w rogu mojego bloga przycisk (z ikonką lub tekstem) i po kliknięciu tego przycisku użytkownik zostanie przeniesiony na samą górę strony, na której obecnie się znajduje. Mam bloga na WordPressie, wrzucam dość długie treści i trochę jednak schodzi, żeby potem wrócić na przykład do górnego menu. Chciałbym dać użytkownikowi możliwość szybkiego przeskoku na samą górę. Nie mam dużych wymagań – coś lekkiego i żeby była możliwość wpływu na wygląd tego przycisku. Ewentualnie jak coś takiego zrobić bez dużej znajomości WP i wrzucania pluginów.

Odpowiedź

Z zaufanych wtyczek do takiego przycisku polecam WPFront Scroll Top.
Do pobrania: https://pl.wordpress.org/plugins/wpfront-scroll-top/
Myślę, że spełni Twoje oczekiwania, jest lekka i ma podstawowe funkcje m.in. :

• możesz wybrać wygląd (w pakiecie około 80 ikonek do wyboru plus możliwość wrzucenia własnej), tekst przycisku, miejsce, zmienić jego przezroczystość czy rozmiar,
• możesz ukryć przycisk z poziomu panelu na wybranych urządzeniach,
• możesz pokazywać i ukrywać przycisk na wybranych podstronach Twojego WP.

Zapytałeś jeszcze czy można coś takiego zrobić samemu bez dobrej znajomości WP.
Jasne i choć powyższy plugin nie jest ciężki, jeśli zrobisz to sam zawsze będziesz miał większe możliwości i o dwa zapytania po JSy i cssy mniej.

Jak zrobić przycisk scrollowania na WP?

Wrzuć sobie kod html (w zależności od tego gdzie chcesz ten przycisk wyświetlać) na przykład do stopki strony. W tym celu w katalogu motywu, którego używasz odnajdź plik footer.php.
Przykładowy kod html:

<div class="btn-to-top">
	<i class="fa fa-angle-up" aria-hidden="true"></i>
</div>

W środek diva wsadziłem ikonkę Font Awesome, jeśli nie masz podpiętych FA bądź chcesz inną ikonkę to zwyczajnie zmienisz to u siebie w htmlu i cssie.

Następnie dowolnie obstyluj sobie ten przycisk w pliku ze stylami:

.btn-to-top {
	position: fixed;
	bottom: 15px;
	right: 15px;
	width: 40px;
	height: 40px;
	background: #00b7bc;
	color: #FFF;
	line-height: 40px;
	text-align: center;
	cursor: pointer;
	font-size: 20px;
	border-radius:5px;
}

Teraz dodaj funkcję obsługującą ten przycisk w pliku z Twoimi skryptami:

jQuery(document).ready(function($) {
	$('.btn-to-top').click(function() {
		$('html, body').animate({
			scrollTop: $("header").offset().top
		}, 1500);
	})
});

Gdzie header to u mnie pierwszy tag html-a w body strony, a 1500 to czas scrollowania do góry w milisekundach (1500 to 1,5 sekundy). Gotowe.
Powyższe rozwiązanie możesz oczywiście dowolnie stylować, edytować czy wykluczać.

Subscribe

Powiadom o

nowych dalszych komentarzach nowych odpowiedziach na moje komentarze

Label

{} [+]

Imię*

E-mail

Pole nie wymagane

Label

{} [+]

Imię*

E-mail

Pole nie wymagane

3 komentarzy

Inline Feedbacks

View all comments

Wincy_pluginów

Największa zmora WordPressa to podejście ludzi: ooo potrzebuję przycisku to zainstaluję sobie do tego plugin. Potem potrzebuję kolejnej pierdoły – kolejny plugin, a potem płacz że coś się sypie jak trzeba naraz zaktualizować 50 (nie) potrzebnych pluginów.
20 linijek kodu, 5 minut szukania w google, a potem o jeden wrzód mniej. Dobrze, że ktoś pokazał jak zrobić te banalną rzecz bez wtyczek..

Odpowiedz

Mateusz

W odpowiedzi do  Wincy_pluginów

Zgadzam sie z Toba, pchanie wszedzie pluginow nie ma sensu, dobrze ze autor dodal jeszcze sposob jak dodac samemu cos takiego. Poczatkujacym sie przyda.

Odpowiedz

Patryk

Działa elegancko – dzięki !

Odpowiedz