K
K
krispey1012021-06-09 17:34:14
JavaScript
krispey101, 2021-06-09 17:34:14

Vanilla JS only scrolls down smoothly and up not smoothly?

There is a code that scrolls smoothly if the desired id is at the bottom of the element. But there was a problem, it is necessary that the desired id be on top and smooth scrolling does not work, what could be the problem?

// собираем все якоря; устанавливаем время анимации и количество кадров
            const anchors = [].slice.call(document.querySelectorAll('a[href*="#"]')),
                animationTime = 300,
                framesCount = 20;

            anchors.forEach(function(item) {
                // каждому якорю присваиваем обработчик события
                item.addEventListener('click', function(e) {
                    // убираем стандартное поведение
                    e.preventDefault();

                    // для каждого якоря берем соответствующий ему элемент и определяем его координату Y
                    let coordY = document.querySelector(item.getAttribute('href')).getBoundingClientRect().top + window.pageYOffset;

                    // запускаем интервал, в котором
                    let scroller = setInterval(function() {
                        // считаем на сколько скроллить за 1 такт
                        let scrollBy = coordY / framesCount;

                        // если к-во пикселей для скролла за 1 такт больше расстояния до элемента
                        // и дно страницы не достигнуто
                        if(scrollBy > window.pageYOffset - coordY && window.innerHeight + window.pageYOffset < document.body.offsetHeight) {
                            // то скроллим на к-во пикселей, которое соответствует одному такту
                            window.scrollBy(0, scrollBy);
                        } else {
                            // иначе добираемся до элемента и выходим из интервала
                            window.scrollTo(0, coordY);
                            clearInterval(scroller);
                        }
                        // время интервала равняется частному от времени анимации и к-ва кадров
                    }, animationTime / framesCount);
                });
            });

Answer the question

In order to leave comments, you need to log in

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question