@myskypesla

Как правильно написать скрипт на vanilla js для прокрутки к блокам?

Как отловить клик по элементу меню и прокрутить страницу до блока с плавной анимацией?

Структуру набросал в jsfiddle

P.S. И подскажите, где посмотреть видео или почитать по таким основам на нативном JS?
  • Вопрос задан
  • 614 просмотров
Решения вопроса 2
@Ridz
jsfiddle
window.addEventListener("DOMContentLoaded", function() {
    function scrollToElement(element, duration) {
        var to = element.getBoundingClientRect().top;
        var from = window.pageYOffset;
        var start = performance.now();
        requestAnimationFrame(function animate(time) {
            var progress = (time - start) / duration;
            1 <= progress && (progress = 1);
            window.scrollTo(0, from + to* progress | 0);
            1 > progress && requestAnimationFrame(animate)
        })
    }
    var nav = document.querySelector(".nav"),
        button = nav.querySelectorAll(".nav__link"),
        block = document.querySelectorAll(".content .block");
    nav.addEventListener("click", function(event) {
        var target = event.target;
        if (target = target.closest(".nav__link")) {
            event.preventDefault();
            var indx = [].indexOf.call(button, target);
            if (indx !== -1) scrollToElement(block[indx], 800)
        }
    })
});
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы