Jak szybko ustawić przewijanie do góry strony na szablonie Genesis za pomocą jQuery, html, CSS
Dziś podzielę się sposobem w jaki sposób łatwo i w szybki sposób. Dodać do strony przycisk ( w moim przypadku strzałka) w trakcie przewijania pojawi się na dole strony, i w zgrabny sposób przewinie nam zawartość strony do pozycji początkowej.
W tym krótkim przykładzie posłużę się szablonem “Genesis” oferowanym przez Studiopress . Rozwiązanie to działać będzie również na innych szablonach. Należy tu zaznaczyć tylko że w innym miejscu umieścimy nasze kody :).
Cała procedura zaczyna się od kilku prostych kroków.
-
Pierwszy krok – ustawienia Genesis
Po zainstalowaniu Szablonu przechodzimy do Genesis >> Theme Seting >>Header and Footer Script
-
Druki Krok – Umożliwienie wyświetlania ikon.
Po przejściu do Ustawień w Genesis Musimy posłużyć się następującymi kodami.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
Powyższy link możemy znaleźć pod adresem: Fontawsome . Dzięki temu linkowy dajemy wsparcie naszego szablonu, do wyświetlania Ikon Font Awsome . Używanie ikon jest zalecane ze względu że ikony są bardzo “lekkie” nie spowalniają czasu ładowania się strony, oraz można je formatować za pomocą stylów (css).
Powyższy odnośnik możemy również umieścić w sekcji <head> stony, w moim przypadku ze względu na wygodę i brak czasu posłużyłem się rozwiązaniem które daje genesis w postaci przygotowanego pola. -
Trzeci krok – utworzenie przycisku.
Wklejenie kolejnego kodu w tym samym polu sekcji “Header Scripts” . Tak jak w poprzednim kroku, kod możemy również umieścić w sekcji <head> naszej strony.
[html] <a href="#" class="scrollToTop" ><i class="fa fa-arrow-circle-up fa-4x"></i></a> [/html]Zwróćmy uwagę na składnię, początek o odnośnik do linku i oznaczenie naszego “ID class” jest to niezbędne aby nasz skrypt jQuery odnalazł nasz element oraz do formatowania CSS . Kolejnym elementem to nasza “Class” która odpowiada na wyświetlanie naszej ikony ( fa fa-arrow-circle-up ). Gdy chcieli byśmy zmienić ikonę szukamy pod adresem w naszym przypadku Font Awsome . Ja dodatkowo do “classy ” dodałem dodatkowy atrybut ( fa-4x) dzięki temu atrybutowi nasza ikona będzie odpowiednio 4x większa.
-
Czwarty etap – połączenie biblioteki jQuery z naszym serwerem.
Przechodzimy do kolejnego pola ” Footer Scripts” znajdującego się w ustawieniach Genesis lub ( wklejamy poniższe kody przed tagiem zamykającym naszego szablonu).
[html]</body>[/html]Kolejny Element:
[html] <script src=’https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js’></script> [/html]Kod ten odpowiedzialny jest za połączenie biblioteki jquery z serwerami google. Rozwiązanie to ma taką zaletę że biblioteki mogą być pobierane bezpośrednio z serwerów google znajdujących się w różnych częściach świata bez potrzeby pobierania biblioteki jquery z naszego serwera, wpływa to w znacznej mierze na wydajność strony.
Następny element który wklejam do tej samej sekcji tuż poniżej kodu podanego powyżej.
[html]<script>
$(document).ready(function(){
// Sprawdź aby okno jest na górze jeśli nie wyświetl naszą ikonę.
$(window).scroll(function(){
if ($(this).scrollTop() > 600) {
$(‘.scrollToTop’).fadeIn();
} else {
$(‘.scrollToTop’).fadeOut();
}
});
//"Click event" aby przewinąć do góry.
$(‘.scrollToTop’).click(function(){
$(‘html, body’).animate({scrollTop : 0},800);
return false;
});
});
</script> [/html]Jest to script który jest odpowiedzialny za nasze animacje i przesuwanie strony. Wartość “600” to wartość która mówi w którym momencie ma się pojawić nasza ikona ( ile pikseli w dół musimy przesunąć stronę) . Oczywiście możemy tą wartość ustawić do swoich potrzeb. Natomiast wartość “800” to wartość podana w milisekundach która mówi o tym jak szybko ( a dokładnie ile czasu zajmie ) przewinięcie strony do góry. Im mniejsza wartość tym przewijanie strony nastąpi szybciej.
-
I kolejny etap ostatni – tworzenie arkuszy stylów CSS.
Zostało nam tylko nadać odpowiedni wygląd i położenie naszej strzałki. Przed rozpoczęciem dodawania stylu zalecał bym przyjrzenie się wcześniej jak nasza ikona wygląda przed formatowaniem. Czy odziedziczyła jakieś style z naszego szablonu. Oraz zastanowienie się gdzie ma się znajdować i jak ma się wyświetlać na różnych urządzeniach.
[css] .scrollToTop{
W moim przypadku chciałem aby znajdowała się w dolnym prawym rogu więc zacząłem od kodu.
position:fixed;
bottom:5px;
right:20px;}[/css]
Po czym chciałem zmienić kolor i i zauważyłem że w “wyróżnione obrazki z wpisów znajdują się nad ( przykrywają strzałkę ) więc dodałem jeszcze z- index
[css] .scrollToTop{
color: #444;
position:fixed;
z-index: 10;
bottom:5px;
right:20px;}[/css]
Na koniec zostały mi tylko jeszcze dwie rzeczy.
[css] .scrollToTop:hover{
Dodać klasę która będzie zmieniać kolor icony po najechaniu myszkącolor: #81d742;
} [/css]Oraz ostatnie szlify i sprawdzenie na urządzeniach mobilnych, w moim przypadku okazało się że ikona jest za duża na małych ekranach więc postanowiłem skorzystać z CSS Media Queries. W przypadku szablonu genesis miałem już gotowe wystarczy odnaleźć odpowiednie miejsce.
[css] @media only screen and (max-width: 880px) {
.scrollToTop{
bottom:5px;
right: 5px;
font-size: 0.5em;
}}
[/css]Efekt jest następujący: LINK
Dodaj komentarz