Скрипт для плавной прокрутки на верх страницы (на JavaScript и на jQuery)

Предлагаю вашему вниманию скрипт, который плавно прокручивает страницу наверх при клике на соответствующую ссылку. Я сделал 2 варианта: на чистом JavaScript и на jQuery. Выбирайте тот, который вам больше по душе.

Вариант на JavaScript

Можно посмотреть готовый пример.

Код скрипта:

var t;
function up() {
	var top = Math.max(document.body.scrollTop,document.documentElement.scrollTop);
	if(top > 0) {
		window.scrollBy(0,-100);
		t = setTimeout('up()',20);
	} else clearTimeout(t);
	return false;
}

Число -100 – это количество пикселей, которое прокручивается вверх через каждые 0,02 секунды (число 20).

В подходящее место html-кода страницы необходимо добавить такую ссылку:

<a href="#" onclick="return up()">наверх</a>

Вариант на jQuery

Можно посмотреть готовый пример.

Код скрипта:

(function($) {
$(function() {

	$('#up').click(function() {
		$('html, body').animate({scrollTop: 0},500);
		return false;
	})

})
})(jQuery)

Число 500 – это время, в течение которого происходит анимация (прокрутка), в данном случае это полсекунды.

В подходящее место html-кода страницы необходимо добавить такую ссылку:

<a href="#" id="up">наверх</a>

В случае, если в браузере отключен JavaScript, при клике на данную ссылку страница также прокрутится наверх, но только уже не плавно.