FadeIn и FadeOut для ScrollTop как поправить

Question

Стоит задача собрать прокрутку вверх страницы только на js. У меня в коде вроде все работает но при резкой перемотке вверх и вниз функция не успевает поменять состояние кнопки и в итоге кнопку не видно. Как я понимаю мой подход не совсем верен подскажите как правильно. Спасибо.

// ========== Add document element to scroll
let myScroll = document.getElementById("scrolltop");

if (!myScroll) {
  myScroll = document.createElement("div");
  myScroll.id = "scrolltop";
  myScroll.className = "btnScrollTop scrolltop";
  document.body.appendChild(myScroll);
}

// ========== Function scroll
function pageUpScroll() {
  let top = Math.max(document.body.scrollTop, document.documentElement.scrollTop);
  if (top > 0) {
    window.scrollBy(0, ((top + 100) / -10));
    t = setTimeout('pageUpScroll()', 20);
  } else clearTimeout(t);
  return false;
}

// ========== Add function FadeIn FadeOut
const fadeIn = (el, timeout, display) => {
  el.style.opacity = 0;
  el.style.display = display || 'block';
  el.style.transition = `opacity ${timeout}ms`;
  setTimeout(() => {
    el.style.opacity = 1;
    flag = true;
  }, 10);
};

const fadeOut = (el, timeout) => {
  el.style.opacity = 1;
  el.style.transition = `opacity ${timeout}ms`;
  el.style.opacity = 0;
  setTimeout(() => {
    el.style.display = 'none';
    flag = false;
  }, timeout);
};


let btnScrollTop = document.querySelector('.btnScrollTop');
btnScrollTop.onclick = pageUpScroll;

let flag = false;

window.addEventListener('scroll', function() {
  //setTimeout(() => {
  if (window.scrollY >= 100) {
    if (!flag) {
      fadeIn(btnScrollTop, 1000, 'block');

    }
  } else {
    if (flag) {
      fadeOut(btnScrollTop, 1000);
    }
  }
  // }, 1000);
});

p {
  height: 2000px;
}

.scrolltop {
  opacity: .7;
  filter: "alpha(opacity=70)";
  position: relative;
  display: none;
  width: 50px;
  height: 50px;
  position: fixed;
  top: 200px;
  left: 5%;
  border: none;
  background: #2c8d1acc;
  outline: 0;
  cursor: pointer;
  z-index: 500;
  border-radius: 4px
}

.scrolltop:after {
  content: "Up";
  font: normal normal normal 20px/1 FontAwesome;
  color: #fff
}

<p>Test R2D2 ...</p>

БЛОГ НА HUSL

FadeIn и FadeOut для ScrollTop как поправить

Ответы (0 шт):