如何使用纯 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

一种方法是在按钮上隐藏 class，在 css 中，我们可以隐藏此 class 的可见性。

.hidden {
  visibilty: hidden;
}

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

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");
    }
});