Главная JavaScript

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

Комментарии (66)

  1. 	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. Спасибо, заврианто на JS забрал в свой фреймворк! Пиши еще на JS … Нафиг тебе эта рыбалка? :D

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

  4. Прокрутка сверху вниз:

    var t;
    function up () {
    if ((window.innerHeight + window. pageYOffset) < document.documentElement.scrollHeight) { window.scrollBy (0,1); t = setTimeout ('up ()', 20);} else clearTimeout (t); return false;

  5. А как сделать скрол, который при первом нажатии на ссылку поднимался бы вверх, а при втором нажатии опускался бы вниз и так постоянно, раз вверх, раз в них?

  6. Вариант jQuery норм работает, спасибо!

  7. Спасибо огромнейшее!!! У меня просто нет слов благодарности.

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