I am working on implementing two buttons on an Angular web page that allow the user to quickly scroll to the top and bottom of the page. However, I want to address a scenario where if the user is already at the very top of the page, the "move up" button should be hidden, and vice versa. To achieve this, I came across a function from Google that hides the button when the user has scrolled 1000 pixels from the top.
ts:
window.onscroll = function() {scrollFunction()};
function scrollFunction() {
if (document.body.scrollTop > 1000 ||
document.documentElement.scrollTop > 1000) {
document.getElementById("myBtnUp").style.display = "block";
} else {
document.getElementById("myBtnUp").style.display = "none";
}
}
HTML:
<button id="myBtnUp">move up</button>
<button id="myBtnDown">move Down</button>
Everything is functioning as expected, but I'm struggling to find a way to hide the second button when the user reaches the very bottom of the page. I couldn't locate a control similar to
document.body.scrollBottom > 1000 or
document.documentElement.scrollBottm > 1000