Скрипт для плавной прокрутки на верх страницы (на 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)
Так намного лучше – при приближении к вершине документа скроллинг замедляется.
Спасибо, заврианто на JS забрал в свой фреймворк! Пиши еще на JS … Нафиг тебе эта рыбалка? :D
Я не парился и прикрутил все на чистом HTML. Правда все время висит)))
Прокрутка сверху вниз:
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;
Брат а как сделать чтобы скролл вниз был и быстро?
А как сделать скрол, который при первом нажатии на ссылку поднимался бы вверх, а при втором нажатии опускался бы вниз и так постоянно, раз вверх, раз в них?
Вариант jQuery норм работает, спасибо!
Спасибо огромнейшее!!! У меня просто нет слов благодарности.