html - 如何在我的网站上使用 css 转换按钮

Question

我需要在我的网站上制作一个下载按钮，比如这个网站“www.showboxdownload.com”当你向下滚动时你可以看到右下角。当有人向下滚动时，我需要使按钮同样可见并在向上滚动时隐藏。提前致谢

标签： htmlcss

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>初始显示为none。例如，您可以使用：

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