Javascript滚动到顶部，然后滚动到底部

Question

I try to create a javascript code to do that: When the user scrolls down 500px from the top of the document, show the button and when the user click this button he go to the top of the page.

when the user don't scroll down and he is in the top of the page it's appear a button to go to the bottom to the page when the user click this button he go to the bottom of the page and the button disapear

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

The problem is in the top button when i click this button it didn't go to the bottom and when i scroll it still appear

but the button in the button work fine when i scroll for 500 px the button appear and when i click this button i go to the top

can you help me to solve the problem of the first button ? to do what i want

Answer 1

You write twice on the same event window.onscroll , only downFunction() will work. You should use 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()" />