如何使用纯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");
}
});