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ć.

Forum dla programistów, wordpressowców - obrazek poglądowy
guest
3 komentarzy
Inline Feedbacks
View all comments
Wincy_pluginów
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..

Mateusz
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.

Patryk
Patryk

Działa elegancko – dzięki !

Ta strona korzysta z ciasteczek. Więcej informacji

The cookie settings on this website are set to "allow cookies" to give you the best browsing experience possible. If you continue to use this website without changing your cookie settings or you click "Accept" below then you are consenting to this.

Close