Javascript滚动到顶部并滚动到底部

Question

我尝试创建一个 javascript 代码来执行此操作:当用户从文档顶部向下滚动 500 像素时，显示按钮，当用户单击此按钮时，他会转到页面顶部。

当用户不向下滚动并且他位于页面顶部时，会出现一个按钮可以转到页面底部当用户单击此按钮时他会转到页面底部并且按钮消失

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

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

}

function downFunction() {
  if (document.body.scrollTop = 0 || document.documentElement.scrollTop = 0) {
    document.getElementById("myBottomBtn").style.display = "none";
  } else {
    document.getElementById("myBottomBtn").style.display = "block";
  }
}
// When the user clicks on the button, scroll to the top of the document
function topFunction() {
  document.body.scrollTop = 0; // For Chrome, Safari and Opera 
  document.documentElement.scrollTop = 0; // For IE and Firefox
}

function bottomFunction() {
  document.body.scrollTop = 100; // For Chrome, Safari and Opera 
  document.documentElement.scrollTop = 100; // For IE and Firefox  
}

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

#myBtn:hover {
  background-color: #555;
}

#myBottomBtn {
  display: block;
  position: fixed;
  right: 30px;
  z-index: 99;
  border: none;
  outline: none;
  background-color: #333;
  color: white;
  cursor: pointer;
  padding: 10px;
  border-radius: 10px;
}

#myBottomBtn:hover {
  background-color: #555;
}

问题出在顶部按钮上，当我点击这个按钮时它没有到达底部，当我滚动时它仍然出现

但是当我滚动 500 像素时，按钮中的按钮工作正常，按钮出现，当我单击此按钮时，我转到顶部

你能帮我解决第一个按钮的问题吗？做我想做的事

Answer 1

你在同一个事件 window.onscroll 上写了两次，只有 downFunction() 会起作用。你应该使用 object.addEventListener("scroll", myScript); EventListener Doc .

window.addEventListener("scroll", function() {
  scrollFunction();
  downFunction();
});;

function scrollFunction() {
  console.log(document.documentElement.scrollTop);
  if (window.scrollY > 200) {
    document.getElementById("myBtn").style.display = "block";
  } else {
    document.getElementById("myBtn").style.display = "none";
  }

}

function downFunction() {
  if (window.scrollY === 0) {
    document.getElementById("myBottomBtn").style.display = "none";
  } else {
    document.getElementById("myBottomBtn").style.display = "block";
  }
}
// When the user clicks on the button, scroll to the top of the document
function topFunction() {
  document.body.scrollTop = 0; // For Chrome, Safari and Opera 
  document.documentElement.scrollTop = 0; // For IE and Firefox
}

function bottomFunction() {
  window.scrollY = 220; // For Chrome, Safari and Opera 
  document.documentElement.scrollTop = 220; // For IE and Firefox  
}

<input type="button" value="bottom" onclick="bottomFunction()" />
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>&nbsp;
<input type="button" id="myBtn" value="myBtn" />
<input type="button" id="myBottomBtn" value="myBottomBtn" />
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>&nbsp;
<input type="button" value="top" onclick="topFunction()" />