Как проскролить страницу к елементу без jQuery?

326

21 января 2018, 05:51

Как сделать на чистом JavaScript?

$(".icon").on("click", function() {
$("html, body").animate({
scrollTop : $(".content").offset().top
}, 800);
});

Answer 1

var icon = document.querySelector('.icon'),
            content = document.querySelector('.content');
        icon.onclick = function() {
            scrollTo(800, content.offsetTop);
        }
        function scrollTo(duration, position) {
            var beginPosition = 0,
                step = duration/position,
                scrollInterval = setInterval(function() {
                    if (beginPosition<= position){
                        window.scroll(0, beginPosition);
                        beginPosition += 1;
                    } else clearInterval(scrollInterval);
                }, step);
        }

При клике на элемент с классом icon вызываем функцию scrollTo(), в которую передаем продолжительность прокрутки к элементу (800) и позицию к которой нужно проскроллить.
Чтобы сделать прокрутку плавной, используем setInterval(), в который передаем step - 800 на позицию блока с классом content.