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

наверх

Вариант на jQuery

Код скрипта:

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

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

})
})(jQuery)

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

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

наверх

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

Другие статьи по рубрике «jQuery»

Простое слайдшоу на jQuery

Добавить комментарии



[CODE] [/CODE]


Комментариев нет!