Плавная прокрутка страницы на чистом javascript

На одном из сайтов нужно было реализовать прокрутку (скролл) страницы наверх с плавной анимацией. На jquery это делается одной командой:

$("html,body").animate({scrollTop:0},500);

А на чистом яваскрипте немного сложнее:

var t;
function scrolltop() {
var top = Math.max(document.body.scrollTop,document.documentElement.scrollTop);
if(top>0) {
window.scrollTo(0,Math.floor(top/1.5));
t = setTimeout("scrolltop()",30);
} else {
clearTimeout(t);
}
return false;
}

Демо

(для просмотра надо прокрутить страницу и нажать кнопку «Наверх» в углу экрана)

Переменная top равна текущему расстоянию прокрутки страницы в пикселях. Каждые 30 мс эта величина уменьшается в 1,5 раза, в итоге плавно достигает нуля. Это имитация свойства ease-out в CSS анимациях.

Если вам нужно скроллить страницу наверх линейно, без ускорения, то пишем как-то так:

window.scrollTo(0,-20);

Тогда страница будет скроллиться наверх со скоростью 20 пикселей в 30 мс.

Чем обусловлен период в 30 мс? Кофмортная частота обновления экрана — примерно 30 кадров в секунду, значит, продолжительность каждого кадра — 30 мс. Для идеальной гладкости можно сделать 60 кадров в секунду, и тогда таймауты должны быть примерно по 15 мс. Но это может подтромаживать на слабых устройствах.

6 мартаjavascriptурок

Смотрите также

Следующая заметка

© 2018