jQuery - Płynne przewijanie strony do góry

Odsyłacz umożliwiający skok do góry strony jest nieodłącznym elementem praktycznie każdej witryny. Dzieje się tak dlatego, że w praktycznie każdej witrynie znajdują się strony, których długość jest większa niż dwie długości ekranu. Im dłuższa strona tym przewijanie jej scrollem myszki lub suwakiem przeglądarki, staje się bardziej uciążliwe. W takim przypadku odsyłacz do góry strony staje się bardzo przydatny. Dawniej był to prosty odsyłacz słowny, obecnie częściej wykorzystywany jest odsyłacz graficzny.

Dzięki użyciu HTML, CSS i jQuery, przycisk odsyłający do góry strony może być umieszczony w dowolnym miejscu strony, a zarazem posiadać unikalny wygląd i wymaganą funkcjonalność.

Zobacz:


Kod HTML

HTML ogranicza się w tym przypadku do deklaracji odsyłacza. W przewidzianym dla odsyłacza miejscu na stronie umieszczamy poniższą linijkę kodu.

<a id="gototop" title="Do góry" href="#"></a>

Kod CSS

W CSS opisujemy właściwości umieszczonego w kodzie HTML linku.

a#gototop {
   position: fixed;
   bottom: 9px;
   right: 9px;
   padding: 0;
   width: 40px;
   height: 40px;
   background: url(ścieżka-na-serwerze/gototop.png) no-repeat center center;
}

Przycisk będzie cały czas widoczny w prawym dolnym narożniku okna przeglądarki, będzie miał wymiary 40/40 pikseli a jego tłem będzie wskazana grafika.


Kod jQuery

Skrypt jQuery spełnia kilka funkcji:

  • ukrywa przycisk przy załadowaniu strony,
  • przy przewijaniu strony w dół wyświetla przycisk, przy powrocie do góry strony ponownie go ukrywa,
  • przewija płynnie stronę do góry.
$(document).ready(function(){
   $('#gototop').hide();
   $(window).scroll(function(){
      if ($(this).scrollTop() > 100) {
         $('#gototop').fadeIn(500);
      }
      else {
         $('#gototop').fadeOut(500);
      }
   });
   $('#gototop').click(function(){
      $('html, body').animate({ scrollTop: 0 }, 1000);
      return false;
   });
});

Czasy wykonywania animacji podawane są w milisekundach. Tak więc czas ukrywania przycisku lub jego pokazywania wynosi 0.5 sekundy, natomiast czas przewijania strony do góry 1 sekundę.