Answer the question
In order to leave comments, you need to log in
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 questionAsk a Question
731 491 924 answers to any question