Здравствуйте, уважаемые форумчане! Есть такой вопрос, кто как делает плавный скроллинг страниц? Сам на данный момент использую nicescroll, но не все так идеально как хотелось бы. Вот пример моей работы http://skferson.ru/
-
1Молодец! Красиво!– NMDCommented 31 окт. 2014 в 19:05
-
Валидность страницы проверьте - есть ошибки, используйте новые теги (так как стоит доктайп хтмл5).– soledar10Commented 31 окт. 2014 в 19:26
-
Тогда такой вопрос: использование новых тегов может повлиять на производительность сайта в лучшую сторону?– Maxim119Commented 31 окт. 2014 в 22:01
-
htmlbook.ru/samlayout/verstka-na-html5/novye-tegi– soledar10Commented 1 нояб. 2014 в 1:07
-
Благодарю!– Maxim119Commented 1 нояб. 2014 в 8:50
3 ответа
В топку ненужные библиотеки, jQuery у вас уже есть, и вот код для плавного скрола, 3 строчки:
$('.click-menu-element').click(function(){
$('html, body').animate({scrollTop:$('#elementId').position().top}, 2000);
});
где click-menu-element
- это элемент меню, elementId
- это id у заголовка нужного вам контента, находящегося в том месте, куда вам нужно переместиться (для корректировки можно уменьшить пикселей на 60), 2000 - скорость перехода на нужный элемент в мс.
Внутри можно повесить также необхимый фукнционал для того, чтобы нужные пункты становились активными, ну и для определения, какой именно пункт нажал юзер. Я так понял, у вас проблемы именно с определением активного пункта меню. :)
-
По сути скролл по блокам я почти также реализовал, но ваш код пригодится, спасибо. ) Проблема немного в другом: как сделать плавный скролл всей страницы, когда пользователь прокручивает колесиком. Он сейчас есть, можно ускорить или замедлить, но когда прокручиваешь, глазам не очень приятно, рябит как-то.– Maxim119Commented 1 нояб. 2014 в 8:35
Чистый 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;
}
элемент к которому тянуть
<button class="btn" onclick="smoothScroll('myId')">туда</button>
<p id="myId">тут</p>
В нашем проекте по видеоредактированию в браузере мы скроллим таймлайн по мере воспроизведения видео. Фронтендом занимаюсь не я, но попробую объяснить, как сделали. Испытывали разные подходы, остановились на следующем:
Анимация делается CSS3 transition'ом - так плавнее всего. Длинный скролл (вам это не понадобится) бьётся на серию маленьких. Каждый следующий запускается по завершению предыдущей. Для глаза не заметно.
-
Интересный вариант. А можно, пожалуйста, ссылку на инфу, как делать или на пример реализации?– Maxim119Commented 1 нояб. 2014 в 8:36