如何使用纯 JavaScript 在 500px 之后显示一个 div？

Question

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

<button class="button">

  GO To UP

</button>   

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

button.onclick = function () {

  window.scrollTo(0, 0);

};

Answer 1

一种方法是在按钮上设置隐藏类，在 css 中我们可以隐藏此类的可见性。.hidden {&nbsp; visibilty: hidden;}为了处理滚动功能，我们可以使用此功能var button = document.querySelector(".button");button.onclick = function(){&nbsp; &nbsp; window.scrollTo(0, 0);}window.addEventListener("scroll", () => {&nbsp; &nbsp; var y = window.scrollY;&nbsp; &nbsp; if (y >= 500) {&nbsp; &nbsp; &nbsp; &nbsp; button.classList.remove("hidden");&nbsp; &nbsp; } else {&nbsp; &nbsp; &nbsp; &nbsp; button.classList.add("hidden");&nbsp; &nbsp; }});