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:

<a href="#" id="scroll-top"></a>

1	<a href="#" id="scroll-top"></a>

oraz style CSS opisujące jego wygląd:

#scroll-top {
    display:none;
    background:url('../images/top.png');
    background-repeat:no-repeat;   
    width:35px;
    height:35px;
    position:fixed;
    bottom:30px;
    right:30px;
}

#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:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js">
<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>

$(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.

#jquery

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

KOMENTARZE