如何使用我网站上的CSS转换按钮

Question

我需要在我的网站（如“ www.showboxdownload.com”）上进行下载按钮 向下滚动时，您可以看到右下角。我需要使按钮在有人向下滚动时同样可见，而在向上滚动时隐藏。预先感谢

Answer 1

您需要听滚动。

window.onscroll = function() {scrollFunction()};

function scrollFunction() {
  if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
    document.getElementById("myBtn").style.display = "block";
  } else {
    document.getElementById("myBtn").style.display = "none";
  }
}

然后添加一个 id 为 myBtn 的按钮，例如：<button id="myBtn">Download</button>，其初始显示为无。 例如，您可以使用：

#myBtn {
  display: none; /* Hidden by default */
  position: fixed;
  bottom: 20px;
  right: 30px;
  z-index: 99;
  cursor: pointer;
}