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:
1 |
<a href="#" id="scroll-top"></a> |
oraz style CSS opisujące jego wygląd:
1 2 3 4 5 6 7 8 9 10 |
#scroll-top { display:none; background:url('../images/top.png'); background-repeat:no-repeat; width:35px; height:35px; position:fixed; bottom:30px; right:30px; } |
- 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:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script> $(document).ready(function() { $(window).scroll(function(){ if ($(this).scrollTop() > 800) { $('#scroll-top').fadeIn(); } else { $('#scroll-top').fadeOut(); } }); $('#scroll-top').click(function(){ $("html, body").animate({ scrollTop: 0 }, 500); return false; }); }); </script> |
- 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.