•  0
  •  166

Smooth scroll - JS przewijanie

Jak wykonać płynną animację przewijania do wskazanego w atrybucie miejsca?

Do wykonania tego zadania można użyć zewnętrznych, rozbudowanych pluginów. Jeśli, jednak animacja którą chcesz uzyskać nie musi być bardzo zaawansowana możesz posłużyć się poniższym prostym kodem.

$('a[data-href]').on('click', function() {

		var offset = 50;
		var duration = 1000;
		var link = this;

		$('html, body').animate({
			scrollTop: $($(link).data('href')).offset().top - offset
		}, duration);

		return false;
	});

Powyższy kod przypisuje zdarzenie click do wszystkich linków z atrybutem data-href z wartością wskazującą na element do którego chcemy przewinąć stronę. Zmieniając wartość duration (ms) - możemy spowolnić lub przyspieszyć wykonywaną animację.

Przykładowy kod HTML prezentujący działanie funkcji:

<body>
	<article id="top" style="min-height: 200vh;">
		<a href="#bottom" data-href="#bottom">Go bottom!</a>
	</article>

	<footer id="bottom">
		<a href="#top" data-href="#top">Go top!</a>
	</footer>
</body>

Do jego prawidłowego działania - niezbędne jest dołączenie biblioteki jQuery.

Dodaj komentarz
Brak wyników.