返回顶部按钮未出现

Question

Using Javascript, I've added a back-to-top button to my website. When I scroll, it appears (so the first function below works fine). However, when I add the second function, the button doesn't even appear when I scroll. I've been at this for hours? Have I missed something obvious?

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
};

---

Edit:

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

Ok, so the issue here, I believe is that top is already a property on window and you are replacing it by creating a global function called top .

This will work if you change your function to something like goToTop .

If you log console.log(window.top) you'll find something already exists there.

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

Instead of

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

I think you should write

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

similar to the next one. I refer to this website - https://www.w3schools.com/jsref/prop_html_style.asp