如何使用纯JavaScript显示500px后的div？

Question

我有一个<button>调用一个滚动到页面顶部的function，如何在800px后自动显示此按钮。只使用纯JavaScript？

<button class="button">
  GO To UP
</button>   

var button = document.querySelector(".button");

button.onclick = function () {
  window.scrollTo(0, 0);
};

Answer 1

一种方法是在按钮上有一个隐藏的类，在css中我们可以给出这个类的可见性来隐藏。

.hidden {
  visibilty: hidden;
}

为了处理滚动功能，我们可以使用这个函数

var button = document.querySelector(".button");

button.onclick = function(){
    window.scrollTo(0, 0);
}

window.addEventListener("scroll", () => {
    var y = window.scrollY;
    if (y >= 500) {
        button.classList.remove("hidden");
    } else {
        button.classList.add("hidden");
    }
});