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

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..
Zgadzam sie z Toba, pchanie wszedzie pluginow nie ma sensu, dobrze ze autor dodal jeszcze sposob jak dodac samemu cos takiego. Poczatkujacym sie przyda.
Działa elegancko – dzięki !