4

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

6
  • 1
    Молодец! Красиво!
    – NMD
    Commented 31 окт. 2014 в 19:05
  • Валидность страницы проверьте - есть ошибки, используйте новые теги (так как стоит доктайп хтмл5).
    – soledar10
    Commented 31 окт. 2014 в 19:26
  • Тогда такой вопрос: использование новых тегов может повлиять на производительность сайта в лучшую сторону?
    – Maxim119
    Commented 31 окт. 2014 в 22:01
  • htmlbook.ru/samlayout/verstka-na-html5/novye-tegi
    – soledar10
    Commented 1 нояб. 2014 в 1:07
  • Благодарю!
    – Maxim119
    Commented 1 нояб. 2014 в 8:50

3 ответа 3

2

В топку ненужные библиотеки, jQuery у вас уже есть, и вот код для плавного скрола, 3 строчки:

$('.click-menu-element').click(function(){
       $('html, body').animate({scrollTop:$('#elementId').position().top}, 2000);
});

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

Пример тут

Внутри можно повесить также необхимый фукнционал для того, чтобы нужные пункты становились активными, ну и для определения, какой именно пункт нажал юзер. Я так понял, у вас проблемы именно с определением активного пункта меню. :)

1
  • По сути скролл по блокам я почти также реализовал, но ваш код пригодится, спасибо. ) Проблема немного в другом: как сделать плавный скролл всей страницы, когда пользователь прокручивает колесиком. Он сейчас есть, можно ускорить или замедлить, но когда прокручиваешь, глазам не очень приятно, рябит как-то.
    – Maxim119
    Commented 1 нояб. 2014 в 8:35
1

Чистый 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>
0

В нашем проекте по видеоредактированию в браузере мы скроллим таймлайн по мере воспроизведения видео. Фронтендом занимаюсь не я, но попробую объяснить, как сделали. Испытывали разные подходы, остановились на следующем:

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

1
  • Интересный вариант. А можно, пожалуйста, ссылку на инфу, как делать или на пример реализации?
    – Maxim119
    Commented 1 нояб. 2014 в 8:36

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.