Как повесить плавный переход по секции на scroll?

Question

[Максим js]

Есть функция в которой при клике происходит плавный переход на следующую секцию:

var dot = $("#dot ul li")
var cont = $("#contents > div")

dot.click(function(e){
  e.preventDefault();
  var target = $(this).index();
  // alert(target);
  var section = cont.eq(target);
  var offset = section.offset().top;
  // alert(offset);
  $("html, body").animate({scrollTop:offset},600,"easeInQuint")
});

Пытаюсь сделать такой переход при прокрутке колесом. То есть крутнул вниз - плавно переместился на секцию ниже, крутнул вверх так же плавно вернулся. Замена click на scroll не работает. Как такое сделать?

Answer 1

[Andrey Vasilev]

https://alvarotrigo.com/fullPage/

Comments

[Максим js]

Спасибо) а без плагинов реализовать такое геморно?

[Александр]

Максим js, Вообще да. Вам не только события мыши надо прослушивать. Как пример (только с событием wheel).

[Максим js]

Александр, Спасибо!

[Александр]

Максим js, Не советую использовать мой код, т. к. это пример. В реальной жизни (читать - продакшене), надо намного лучше логику.

[Максим js]

Александр, я наверное плагином воспользуюсь.

[Максим js]

Александр, плагин оказался платный, а ваш код рабочий) подскажите пожалуйста как установить время прокрутки к следующей секции?

const changeSection = throttle((event) => {
    const direction = Math.sign(event.deltaY);

    current += direction;
    if (current > sections.length - 1) {
        current = 0;
    }
    if (current < 0) {
        current = sections.length - 1;
    }

    sections[current].scrollIntoView({
        behavior: 'smooth'
    });
}, 850);

тут получается устанавливается задержка до срабатывания функции еще раз, а где можно установить саму скорость смены секции?

[Александр]

Максим js, В моем варианте - нигде. Всем рулит .scrollIntoView(). Если хотите использовать мой пример, Вам надо учесть следующее: прикрутить Intesection Observer, для определения текущей секции после перезагрузки; прикрутить поддержку клавиатуры (Page Up, Page Down, Space, Enter, Arrow Up, Arrow Down); в секциях с обычным скроллом - убирать переключение слайдов. Ну это минимум. Если не ошибаюсь - для некоммерческих проектов не надо плагин покупать.

[Andrey Vasilev]

Максим js, плагин не платный, кучу раз его ставил, просто нужно немного погуглить)