jQuery powrót do góry strony

Powrót do bloga

To pierwszy wpis dotyczący jQuery na tym blogu, dlatego postawiłem na coś prostego do zrobienia, tak aby każdy kto posiada własną stronę, mógł dodać ten bajerek również u siebie. Link „powrót do góry strony”- chodzi o dodanie przycisku, czy linku, który będzie się pojawiał w momencie kiedy strona zostanie przewinięta (przesunięta) w dół, a sam link ma za zadanie, po kliknięciu w niego, przenosić czytelnika na górę strony.

Poradnik i przycisk bez problemu można wykorzystać na każdej stronie, niezależnie od tego czy jest to zwykła strona w HTML, czy blog postawiony na WordPressie – potrzebny będzie jedynie dostęp do plików źródłowych strony.

Chyba źle by się stało gdybym w pierwszej kolejności nie pokazał najprostszej możliwej drogi, do osiągnięcia podobnego efektu z wykorzystaniem jedynie HTML – to rozwiązanie ma swoje plusy, jest na pewno dużo „lżejsze” dla przeglądarek (nie ładujemy dodatkowej biblioteki, i nie wykonujemy dodatkowego kodu JavaScript . Przy tym rozwiązaniu mamy również pewność, że taki link zawsze zadziała, nawet w momencie, gdy użytkownik ma w przeglądarce wyłączoną obsługę JavaScript.  Dodatkowo ten sposób jest też łatwiejszy w implementacji na stronie i na pewno osoby nie preferujące wodotrysków docenią również taką możliwość.

Sposób pierwszy – HTML, linki i kotwice (anchor links)

Ten sposób jest stosunkowo prosty – opiera się o zwykłe linki i właściwie mógłby to być temat na oddzielny wpis. Idea jest taka, że tworzymy w dokumencie HTML odnośnik, który po kliknięciu będzie przenosił do miejsca w dokumencie zwanego kotwicą… Ta technika często wykorzystywana jest w stopkach stron, zwykle jest tam taka ikona ze strzałką do góry, albo zwykły tekstowy link z podpowiedzią „Zabierz mnie do góry”, albo „Do góry”, albo samo „Góra”. Z linkami i kotwicami można się również często zetknąć przy bardziej profesjonalnych, bardzo długich dokumentach – wykorzystuje się je do zrobienia spisu treści, albo jako szybką nawigację między sekcjami na jednej stronie.

Z okazji tego wpisu przygotowałem proste demo, w którym na samym dole umieściłem link przenoszący czytelnika na górę dokumentu. Co jest potrzebne, aby zrobić to na własnej stronie? Nic. Wystarczy w atrybucie href linka wpisać # – hash, a w samym tagu coś co by wskazywało na jego zastosowanie, jakiś obrazek ze strzałką, albo tekst. Całość, czyli link umieszczamy gdzieś, gdzie chcemy aby link się pokazał, czyli zwykle gdzieś na dole strony, np w stopce.

Przykład pierwszy – znak specjalny HTML – strzałka w górę

<a href="#" title="Do góry!">[ &uarr; ]</a>

Przykład drugi – Tekst

<a href="#" title="Do góry!">Zabierz mnie na górę!</a>

Przykład 3 – Obrazek

<a href="#" title="Do góry!"><img src="strzalka.jpg" alt="strzałka do góry" /></a>

Ten ostatni oczywiście wymaga podania prawidłowej ścieżki do obrazka.

Trochę bardziej zaawansowany przykład

scrollupTeraz, możemy zrobić coś, co będzie bardziej nawiązywało do efektu, który chcemy osiągnąć. Umieścimy nasz link na stałe w prawym dolnym rogu okna przeglądarki, tak aby przesuwając stronę nasz link pozostawał w tym samym miejscu.

Dokładnie o co mi chodzi, możecie sprawdzić w drugim demie. Co trzeba zrobić, aby osiągnąć taki efekt? Tym razem trzeba umieścić nasz link, gdzieś poza głównym obszarem kodu strony, tak aby nie przeszkadzał – najlepiej gdzieś na samym początku strony tuż po znaczniku <body>, albo tuż przed znacznikiem zamykającym </body>. Możemy wykorzystać któryś z poprzednich przykładów linków, ja użyję tego z obrazkiem, gdyż będę chciał go później wykorzystać do ostatniej prezentacji z jQuery. 🙂

Wskazane jest, aby naszemu linkowi nadać jakiś identyfikator… Mój gotowy link do wklejenia w kodzie strony wygląda następująco:

<a href="#" title="Do góry!" id="scroll-to-top"><img src="scrollup.png" alt="strzałka do góry" /></a>

i został umieszczony w kodzie strony tuż przez znacznikiem zamykającym </body>. Możesz także zajrzeć do kodu źródłowego strony demonstracyjnej.

Po odświeżeniu strony mamy już działający guzik odsyłający na górę strony, z tym że jest umieszczony w złym miejscu i że widać go tylko jak się zjedzie na sam dół strony. Nadajmy mu kilka reguł CSS, które załatwią problem:

#scroll-to-top{
   position:fixed;
   bottom:15px;
   right:20px;
   opacity:0.8;
}
#scroll-to-top:hover{
   opacity:1;
}

Pierwsza linijka, czyli

position:fixed;

ustawia pozycję naszej strzałki zawsze względem okna przeglądarki. Dając efekt przyczepienia elementu na stałe na ekranie – przy przewijaniu strony element będzie zawsze w tym samym miejscu okna. Dwie następne linijki ustawiają dokładną pozycję linka od dołu i od prawej krawędzi okna przeglądarki. Na koniec zmniejszyłem trochę krycie, aby po najechaniu kursorem uzyskać elegancki efekt. 😀

Jeszcze raz zamieszczam link do dema tego przykładu, gdzie można dokładnie podejrzeć cały kod.

jQuery way – Scroll to top, powrót do góry strony

jquery-logoW porządku, teraz gdy już mamy „bazę” dla naszego linku, możemy go trochę zmodyfikować i ulepszyć. Sprawimy, że link będzie widoczny tylko gdy zjedziemy trochę na dół, oraz dodamy efekt „płynnego przewinięcia” strony zamiast skoku jak to było w przykładzie z samym HTML.

Zacznijmy od podlinkowania biblioteki jQuery do strony. Możemy to zrobić na dwa sposoby:

  • możemy skorzystać z biblioteki hostowanej na serwerach Google, dodając taki snippet najlepiej w sekcji <head> strony:
    <script src=”http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js”></script>
  •  albo pobrać z oficjalnej strony jquery.com i podlinkować, o tak:
    <script src=”ścieżka/go/jQuery/jquery.min.js”></script>

W tym przykładzie korzystamy z dokładnie tego samego kodu strzałki co w poprzednim przykładzie. Do CSS później dodamy jeszcze jedną regułę, ale zajmijmy się ważniejszą sprawą, czyli skryptem jQuery.

Pierwsza sprawa, którą się zajmiemy, to będzie efekt „przewinięcia” na górę strony. Do dokumentu dodajemy następujący kod:

<script>
 $(function(){
    $("#scroll-to-top").click(function(e){
       e.preventDefault();
       $('html, body').animate({scrollTop:0}, 1500);
    });
 });
 </script>

Należy pamiętać, aby w miejscu #scroll-to-top, podać odpowiedni identyfikator – ten który użyliśmy dla linka. Poza tym możemy tutaj zmienić drugi argument funkcji animate(), który ustawia prędkość animacji. Im więcej tym dłużej animacja będzie trwać – w tym przypadku 1500 oznacza 1500 milisekund.

Teraz dodamy ukrywanie i pokazywanie przycisku. Do CSS dodajemy regułę, która ukryje przycisk na początku:

display:none;

Cały kod CSS wygląda następująco:

.to-top{
    text-align:center;
}
#scroll-to-top{
    display:none;
    position:fixed;
    bottom:15px;
    right:20px;
    opacity:0.8;
}
#scroll-to-top:hover{
    opacity:1;
}

Dokładamy do wcześniejszego kodu jQuery, kilka linijek które przy przesuwaniu strony sprawdzą odległość od górnej krawędzi strony i w odpowiednim momencie ukryją bądź pokażą przycisk… Cały kod wygląda następująco, a efekt można podejrzeć w trzecim demie tutaj.

<a href="#" title="Do góry!" id="scroll-to-top"><img src="scrollup.png" alt="strzałka do góry" /></a>

 <script>
 $(function(){
    var stt_is_shown = false;
    $(window).scroll(function(){
       var win_height = 300;
       var scroll_top = $(document).scrollTop(); 
       if (scroll_top > win_height && !stt_is_shown) {
          stt_is_shown = true;
          $("#scroll-to-top").fadeIn();
       } else if (scroll_top < win_height && stt_is_shown) {
          stt_is_shown = false;
          $("#scroll-to-top").fadeOut();
       }
   });
   $("#scroll-to-top").click(function(e){
      e.preventDefault();
      $('html, body').animate({scrollTop:0}, 1500);
    });
 });
 </script>

Odnośniki do wszystkich stron demo:

Back to top WordPress

W WordPressie sprawa nie jest dużo trudniejsza. Bazując na kodzie z poprzedniego przykładu wystarczy tylko kilka kroków.

Kod CSS umieszczamy w pliku style.css

.to-top{
    text-align:center;
}
#scroll-to-top{
    display:none;
    position:fixed;
    bottom:15px;
    right:20px;
    opacity:0.8;
}
#scroll-to-top:hover{
    opacity:1;
}

Zapisujemy obrazek strzałki w katalogu grafiki szablonu WordPress. Kopiujemy kod HTML i jQuery do pliku np. footer.php motywu, najlepiej jest odnaleźć w tym pliku linijkę

<?php wp_footer(); ?>

i bezpośrednią nad nią dodać kod – tak jak jest to pokazane na następnym listingu:

    <a href="#" title="Do góry!" id="scroll-to-top"><img src="<?php bloginfo('template_url'); ?>/img/scrollup.png" alt="strzałka do góry" /></a>

     <script>
     $(function(){
        var stt_is_shown = false;
        $(window).scroll(function(){
           var win_height = 300;
           var scroll_top = $(document).scrollTop(); 
           if (scroll_top > win_height && !stt_is_shown) {
              stt_is_shown = true;
              $("#scroll-to-top").fadeIn();
           } else if (scroll_top < win_height && stt_is_shown) {
              stt_is_shown = false;
              $("#scroll-to-top").fadeOut();
           }
       });
       $("#scroll-to-top").click(function(e){
          e.preventDefault();
          $('html, body').animate({scrollTop:0}, 1500);
        });
     });
     </script>

    <?php wp_footer(); ?>
</body>
</html>

Tutaj należy tylko zwrócić uwagę na linijkę w której podajemy ścieżkę do grafiki strzałki. Robimy to w ten sposób:

<a href="#" title="Do góry!" id="scroll-to-top"><img src="<?php bloginfo('template_url'); ?>/img/scrollup.png" alt="strzałka do góry" /></a>

Dziękuję za dobrnięcie do końca artykułu. Mam nadzieję, że Ci się spodobał. Jeżeli masz jakieś pytania pisz w komentarzach poniżej.

Darmowe strzałki do wykorzystania na Twojej stronie

 


Inne ciekawe wpisy:

  1. facebook pageplugin slider box
  2. Jak napisać plugin do WordPress
  5. facebook pageplugin slider box
  6. Owl Carousel w WordPress. Piszemy własny widget

Wpis otagowano:

Komentarze do wpisu 49 komentarzy

Pomogłem? Dodaj coś od siebie! Skomentuj ten wpis:

Twój adres e-mail nie zostanie opublikowany. Wymagane pola są oznaczone *