Przycisk powrotu do góry w jQuery

25 listopada 2015

Przypnij

Druk/PDF

Za pomocą metod jQuery animate i scrollTop można łatwo utworzyć przycisk powrotu na górę strony z animacją i nie trzeba do tego celu wykorzystywać żadnych wtyczek.

Kod jQuery:

// powrót do góry
$('.top').click(function (e) {
  e.preventDefault();
  $('html, body').animate({scrollTop: 0}, 800);
});

Kod HTML

<!-- dowolnemu elementowi, np. kotwicy, należy przypisać klasę top -->
<a class="top" href="#">Powrót na górę</a>

Wartość własności scrollTop określa miejsce, do którego ma zostać przewinięta strona. Działanie tego prostego skryptu polega na animowaniu przewijania elementu body przez 800 milisekund w celu przejścia na górę strony.