Question

使用 Javascript，我在我的网站上添加了一个返回顶部按钮。当我滚动时，它出现（所以下面的第一个功能工作正常）。但是，当我添加第二个功能时，滚动时甚至不会出现该按钮。我已经在这里呆了几个小时了！我错过了一些明显的东西吗？

window.addEventListener("scroll", appear);

function appear(){
  if (document.documentElement.scrollTop > 20)
    {document.getElementById("button").style = "display: block;"}
  else
    {document.getElementById("button").style = "display: none;"}
};


document.getElementById("button").addEventListener("click", top);

function top(){
  document.documentElement.scrollTop = 0
};

编辑：

html

<img id="button" src="button.jpg" alt="the back-to-top button">

css

#button {
  display: none;
  position: fixed;
  bottom: 20px;
  right: 30px;
  z-index: 1;
  height: 50px;
  border-radius: 10px;
  cursor: pointer;
}

Answer 1

好的，所以这里的问题是，我相信 top 已经是 window 上的一个属性，您正在通过创建一个名为 top 的全局函数来替换它。

如果您将函数更改为 goToTop 之类的内容，这将起作用。

如果您登录 console.log(window.top)，您会发现那里已经存在一些东西。

window.addEventListener("scroll", appear);

function appear(){
  if (document.documentElement.scrollTop > 20)
    {document.getElementById("button").style = "display: block;"}
  else
    {document.getElementById("button").style = "display: none;"}
};

function goToTop(){
  document.documentElement.scrollTop = 0
};

document.getElementById("button").addEventListener("click", goToTop);

Answer 2

代替

document.getElementById("button").style = "display: block;"

我觉得你应该写

document.getElementById("button").style.display = "block"

类似于下一个。我参考这个网站 - https://www.w3schools.com/jsref/prop_html_style.asp

返回顶部按钮未出现

2 个答案: