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

Question

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

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

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。

＆＃13;

＆＃13;

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  
}

＆＃13;

<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()" />

＆＃13;

＆＃13;

＆＃13;