@sergemin

Как правильно сделать плавную прокрутку к якорю на чистом js?

Захотел использовать js анимацию, но приходится мудрить, дописывать дополнительные условия, в общем, костыли писать.
menuBlock.addEventListener('click', function(e) {
        let target = e.target;
        let topDistance = '';
        if(target.tagName == 'A') { // если кликнутый элемент ссылка, то
            e.preventDefault();
            let currentId = target.getAttribute('href'); // берем якорь
            let foundElement = document.querySelector(currentId); //ищем элемент с таким id
            topDistance = foundElement.getBoundingClientRect().top; //измеряем расстояние от верха страницы до этого элемента
            //add # to link
            history.pushState(null, null, currentId);
            location.hash =  currentId; //меняем урл, чтобы имитировать стандарный переход по якорной ссылке
        }

        //animate scrolling to #links
        let startAnimation = performance.now();
        let times = 0;
        requestAnimationFrame(function measure(time) {
            if(topDistance > 0) {
                window.scrollBy(0, time-startAnimation);
                startAnimation = time;
                if (times++ < topDistance - 50) requestAnimationFrame(measure);

            } else if(topDistance < 0) {
                window.scrollBy(0, -1);
                startAnimation = time;
                if (times-- > topDistance - 50) requestAnimationFrame(measure);
            }
        })
        //window.scrollBy(0, topDistance - 40);
    })


Подскажите, пожалуйста, как правильно реализовать плавный подъезд к элементу
  • Вопрос задан
  • 646 просмотров
Пригласить эксперта
Ответы на вопрос 1
sergey-gornostaev
@sergey-gornostaev
Седой и строгий
Вам может помочь этот ответ.
Ответ написан
Комментировать
Ваш ответ на вопрос

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

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