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

Скрипт для плавной прокрутки на верх страницы (на 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, при клике на данную ссылку страница также прокрутится наверх, но только уже не плавно.

Комментарии (60)
  1. 1
    anon
    	function up() {
    		var top = Math.max(document.body.scrollTop,document.documentElement.scrollTop);
    	 if(top > 0) {
    		window.scrollBy(0,((top+100)/-10));
    		t = setTimeout('up()',20);
    	 } else clearTimeout(t);
    	 return false;
    	}

    Так намного лучше — при приближении к вершине документа скроллинг замедляется.

  2. 2

    Спасибо, заврианто на JS забрал в свой фреймворк! Пиши еще на JS … Нафиг тебе эта рыбалка? :D

  3. 3

    Я не парился и прикрутил все на чистом HTML. Правда все время висит)))

Ваш комментарий