Как сделать скроллинг плавным?

Question

[Tenebrius]

Есть сайт-одностаничник. На нем меню с переходами к якорям. Захотелось приукрасить, чтобы переход был анимированным, а не мгновенным.

Использовал в скрипте такой код:

var destination = Math.round($("a[name='"+str+"']").offset().top)-50;
$('html, body').animate({ scrollTop: destination }, 500);

Анимация-то появилась. Но она какая-то дерганная. С задержками и подтормаживаниями.

Таким образом у меня два вопроса.

Почему анимация тормозит? (Вполне допускаю, что из-за моей криворукости, но все же не понятно)
Как сделать плавную анимацию перехода?

Если это можно сделать на чистом JS - вообще отлично.

P.S. Я видел подобные вопросы, но ответов на свои не нашел.

Answer 1

[Николай]

Советую использовать jquery.scrollTo вместо своих велосипедов.

Comments

[Евгений Петров]

Посмотрел. делает он ровно то же — определяет, что использовать — html или body для Quirks Mode и webkit. Правда обращается к ним архаично — $('html') и $('body').

Answer 2

[A K]

перед энимэйт поставьте stop()

$('html, body').stop().animate({ scrollTop: destination }, 500);

Comments

[Tenebrius]

И со stop'ом тоже подтормаживает, как ни странно.

[A K]

Делал для своих нужд, но вы можете поковырять jsfiddle.net/Symphony/8rfL8oc2/embedded/result

Answer 3

[Евгений Петров]

Зачем вы крутите оба элемента? По-хорошему нужно только в корневом:

$(document.documentElement).animate({ scrollTop: destination }, 500);

Но в режиме Quirks Mode в обычных браузерах и в webkit всегда нужно крутить body:

$(document.body).animate({ scrollTop: destination }, 500);

Обращаться к элементам именно так, а не указывать для парсинга имя тэга.
В итоге примерно так:

var element = 'WebkitAppearance' in document.documentElement.style || document.compatMode == 'BackCompat' ? document.body : document.documentElement;
$(element).animate({ scrollTop: destination }, 500);

Comments

[Tenebrius]

Первоначально я разделял. Сафари крутился через body, а остальные через html. При объединении хуже не стало. Лучше, впрочем, тоже.

[Евгений Петров]

Есть другой вариант - перемещать блок-обёртку, а html и body сделать с height:100% и overflow:hidden.
И этому блоку можно поставить transition для плавности вместо использования animate. Мне кажется, это решило бы проблему.

[Евгений Петров]

И неплохо бы было увидеть страницу — что-то забивает event stack.
Возможно в ней совершается своя анимация, а может идут расчёты сложные.

[Tenebrius]

Проблема, можно сказать, решена. Но все очень странно. Глюки с тормозами есть только если страница открывается с локального компьютера. Если страница грузится с сервера, все нормально. Как и почему это происходит я не понимаю.

[Евгений Петров]

Нужно смотреть консоль. Возможно, что-то не загружается.

Answer 4

[rinatoptimus]

projects.lukehaas.me/scrollify/#overview