scrollowanie, przewijanie do góry

Płynny powrót „do góry” strony

Często na pojedynczych stronkach zdarza się, że treść posta, artykułu, newsa jest dość obszerna a powrót do nawigacji irytujący, zakładając, że osadzony jest w nagłówku strony. Aby cofnąć się „do góry” musimy przebierać suwakiem przeglądarki jak chomik kołowrotkiem. Na szczęście jest proste rozwiązanie w postaci graficznego przycisku (zazwyczaj z symbolem strzałki), którego kliknięcie natychmiast przeniesie nas z prędkością światła 😉 „do góry” – w miejsce oznaczone kotwicą. Efekt, o którym nawijam można podglądnąć na tymże blogu 😉

Przykładowy kod HTML dla przycisku:

oraz style CSS opisujące jego wygląd:

  • display:none – domyślnie przycisk jest ukryty
  • background:url(‚../images/top.png’) – adres do pliku graficznego
  • position:fixed – stała pozycja ustalona (bottom:30px – odległość od dolnej krawędzi okna przeglądarki; right:30px – od prawej krawędzi).

Mechanizm płynnego powrotu:

  • scrollTop() – zwraca aktualną pozycję suwaka przeglądarki. Jeśli wartość ta przekroczy > 800 to wyświetli się (fadeIn) przycisk scroll-top, w przeciwnym wypadku przycisk zostanie z powrotem ukryty (fadeOut). Z tą wartością możesz trochę pokombinować dostosowując ją do potrzeb własnej witryny.
  • $(„html,body”).animate({scrollTop:0},500) – za pomocą funkcji animate zawartość html,body jest płynnie przewijana do góry (scrollTop), na pozycję 0. Prędkość animacji = 500. Tutaj również możesz poszaleć bawiąc się parametrami funkcji animate.
wydrukuj temat