Плавный скролл страницы

#jquery #javascript #frontend

Здравствуйте, уважаемые форумчане!
Есть такой вопрос, кто как делает плавный скроллинг страниц?
Сам на данный момент использую nicescroll, но не все так идеально как хотелось бы.
Вот пример моей работы http://skferson.ru/    

Ответы

Ответ 1

В топку ненужные библиотеки, jQuery у вас уже есть, и вот код для плавного скрола,
3 строчки:
$('.click-menu-element').click(function(){
       $('html, body').animate({scrollTop:$('#elementId').position().top}, 2000);
});

где click-menu-element - это элемент меню, elementId - это id у заголовка нужного
вам контента, находящегося в том месте, куда вам нужно переместиться (для корректировки
можно уменьшить пикселей на 60), 2000 - скорость перехода на нужный элемент в мс.
Пример тут
Внутри можно повесить также необхимый фукнционал для того, чтобы нужные пункты становились
активными, ну и для определения, какой именно пункт нажал юзер. Я так понял, у вас
проблемы именно с определением активного пункта меню. :)


Ответ 2

Чистый JS без библиотек

function smoothScroll(Element) {

Element = document.getElementById(Element);
var selectedPosX = 0;
var selectedPosY = 0;
while (Element != null) {
    selectedPosX += Element.offsetLeft;
    selectedPosY += Element.offsetTop;
    Element = Element.offsetParent;
}
window.scrollTo(selectedPosX, selectedPosY);
}


и css

html {
  scroll-behavior: smooth;
}


элемент к которому тянуть


тут


Ответ 3

В нашем проекте по видеоредактированию в браузере мы скроллим таймлайн по мере воспроизведения
видео. Фронтендом занимаюсь не я, но попробую объяснить, как сделали. Испытывали разные
подходы, остановились на следующем:
Анимация делается CSS3 transition'ом - так плавнее всего. Длинный скролл (вам это
не понадобится) бьётся на серию маленьких. Каждый следующий запускается по завершению
предыдущей. Для глаза не заметно.