Добрый день.
Есть кнопка наверх на JavaScript. Написать ее написал когда-то, а появилась задача написать два варианта ее показа/скрытия. Сейчас кнопка появляется, при превышении определенного значения pageYOffset. И убирается так же, при возврате в нужную зону. А вот что необходимо реализовать:
-- Кнопка появляется, как обычно, при превышении установленного значения pageYOffset, а затем, через несколько секунд исчезает при отсутствии скролла. И заново появляется при любом скролее, при нахождении значений pageYOffset, в котором она должна быть.
-- А второй вариант отличается от первого только тем, что кнопка, после того, как скрылась, появлялась при при скролле на определенное количество значений pageYOffset.
Не судите строго. Только начал учиться JS, а нагуглить не смог.
(function() {
'use strict';
var goTopBtn = document.querySelector('.back_to_top');
function trackScroll() {
let scrolled = window.pageYOffset;
let 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() {
if (window.pageYOffset > 500) {
window.scrollBy(0, -40);
setTimeout(backToTop, 0);
}
}
window.addEventListener('scroll', trackScroll);
goTopBtn.addEventListener('click', backToTop);
})();