Кнопка наверх JS - работает в Mozilla, в Chrome глючит
Есть сайт. Решил сделать кнопку наверх с помощью JS. В Mozilla кнопка отрабатывает толково: появляется при смещении вниз, кликабельна и плавно скроллит наверх.
В Хроме проблемы после нажатия: движение явно очень замедленно, поднимается максимум на высоту одного экрана и останавливается. Повторный клик приводит к "дерганию" стриницы, после обновления - также смещается на высоту одного экрана.
Подскажите, что не так?
(function() {
'use strict';
function trackScroll() {
var scrolled = window.pageYOffset;
var coords = document.documentElement.clientHeight;
if (scrolled > coords) {
goTopBtn.classList.add('back_to_top-show');
}
if (scrolled < coords) {
goTopBtn.classList.remove('back_to_top-show');
}
}
function backToTop() {
var scrollStep = window.pageYOffset / 40;
if (window.pageYOffset > 0) {
window.scrollBy(0, -(scrollStep));
setTimeout(backToTop, 20);
}
}
var goTopBtn = document.querySelector('.back_to_top');
window.addEventListener('scroll', trackScroll);
goTopBtn.addEventListener('click', backToTop);
})();
let html = document.documentElement;
let scrollPosition = window.pageYOffset;
html.style.top = -scrollPosition + "px";
html.classList.add("hystmodal__opened");
html.classList.remove("hystmodal__opened");
window.scrollTo(0, scrollPosition);
html.style.top = "";
Ответы (1 шт):
Автор решения: SG7R
→ Ссылка
Заменил участок кода с функцией со ScroolBy -> на ScroolTo (0,0). И убрал планировщик SetTimeOut. Работает и без него с плавной прокруткой. Проверял в Chrome, Mozilla, Edge.
function backToTop() {
if (window.pageYOffset > 0) {
window.scrollTo(0, 0);
}
}