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

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

    }

});