用户向下滚动时更改css显示。没有jQuery

Question

实际上我想创建一个没有jQuery的“滚动到顶部”按钮。
转到顶部功能已经工作。
现在我需要自动化display: none到{ {1}}当用户向下滚动页面时。当它回到顶端时，另一种方式。

display: block

Answer 1

试试这个

＆＃13;

＆＃13;

var goTop = document.getElementById('GoTop');
window.onscroll = function(ev) {
  if (this.pageYOffset > 100) {
    goTop.style.display = 'block';
  } else {
    goTop.style.display = 'none';
  }
};

＆＃13;

div {
  height: 200vh;
  width: 100%;
}

#GoTop {
  display: none;
  position: fixed;
  bottom: 20px;
  right: 30px;
  z-index: 99;
  border: none;
  outline: none;
  background-color: red;
  color: white;
  cursor: pointer;
  padding: 15px;
  border-radius: 10px;
}

＆＃13;

<a href="#ancor-top" id="GoTop">Top</a>
<div>
</div>

＆＃13;

＆＃13;

＆＃13;