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

Question

[myskypesla]

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

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

P.S. И подскажите, где посмотреть видео или почитать по таким основам на нативном JS?

Answer 1

[Immortal_pony]

https://pawelgrzybek.com/page-scroll-in-vanilla-ja...

Comments

[myskypesla]

Immortal_pony, спасибо. То что нужно!

Answer 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)
        }
    })
});

Comments

[Alex_Nzr]

Объясните, пжлста, кто-нибудь, что означают эти строки:

1 <= progress && (progress = 1);
Это будет либо истина либо ложь, но для чего оно в вышеприведённой функции?

window.scrollTo(0, from + to* progress | 0);
что означает "|" перед 0?

[Ridz]

1 <= progress если время прошло больше запланированного то обрезать до нужного значения.
что означает "|" перед 0? удаляет дробную часть числа, почти тоже самое что Math.trunc()