按下按钮

Question

我的网站上有一个简单的固定锚点，它的位置是固定的。当它进入top时我需要让它消失。我应该添加什么javascript代码？ 更好的是简单和javascript（而不是jQuery）。

HTML：

<a id="go-up" href="#top"></a>

CSS：

a#go-up{
    position: fixed;
    border: 5px solid gray;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    top: 400px;
    left: 50px;
    background-image: url(../pic/up.jpg);
    background-position: center;
    z-index: 100;
    -webkit-filter: opacity(.4);
    filter: opacity(.4);
}
a#go-up:hover{
    -webkit-filter: opacity(1);
    filter: opacity(1);
}

Answer 1

向窗口滚动添加一个监听器并检查位置并切换显示。

var btn = document.getElementById("go-up");
window.addEventListener("scroll", function () {
    btn.classList.toggle("show", window.scrollY > 100);
});

div { height:100px; }
#go-up { position : fixed; top : 60px; right:60px; display:none }
#go-up.show { display : block; }

<a id="go-up" href="#top">UP</a>
<a id="top"></a>
<div>X</div>
<div>X</div>
<div>X</div>
<div>X</div>
<div>X</div>