Hej there,
I'm not a developer, but trying to set up a small private webpage for my wedding celebration, and want to add a scroll-to-top button. I am programming the website manually using VSC. My problem is that I can generate the button allright using HTML and CSS, but the JS doesn't seem to work, and I have no idea what's wrong. Yes, JS is enabled in the browser.
So I add this button in HTML:
<button onclick="topFunction()" id="myBtn" title="Go to top">Top</button>
and link my .js file in the HTML page header with
<script type="text/javascript" src="javascript.js"> </script>
Then I add the CSS:
#myBtn {
display: none;
position: fixed;
bottom: 20px;
right: 30px;
z-index: 99;
border: none;
outline: none;
background-color: red;
color: white;
cursor: pointer;
padding: 15px;
border-radius: 10px;
font-size: 18px;
}
#myBtn:hover {
background-color: #555;
}
When I set the display property to "block", the button shows where it's supposed to be. The hover effect also works fine.
Then I added the .js file; I actually just copy-and-pasted code from W3Schools. When it didn't work, I tried to fiddle around with it, but found no solution.
The button is supposed to appear when the page is scrolled down 20px, and disappear when it's less. However, the button just never appears no matter how far I scroll the page.
//Get the button:
mybutton = document.getElementById("myBtn");
// When the user scrolls down 20px from the top of the document, show the button
window.onscroll = function() {scrollFunction()};
function scrollFunction() {
if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
mybutton.style.display = "block";
} else {
mybutton.style.display = "none";
}
}
// When the user clicks on the button, scroll to the top of the document
function topFunction() {
document.body.scrollTop = 0; // For Safari
document.documentElement.scrollTop = 0; // For Chrome, Firefox, IE and Opera
}
It'd be great if someone could help me with this.
I added the <button> element inside the <body> element and gave height to the <body> element so that the onscroll event could be triggered. In this case the <button> works fine when the onscroll event is triggered. The scrollbar must be opened for the onscroll event to be triggered. The page height must be greater than the full screen height for the scrollbar to open.
mybutton = document.getElementById("myBtn");
function scrollFunction() {
console.log(document.body.scrollTop )
console.log(document.documentElement.scrollTop)
if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20)
mybutton.style.display = "block";
else
mybutton.style.display = "none";
}
function topFunction() {
document.body.scrollTop = 0;
document.documentElement.scrollTop = 0;
}
window.onscroll = function() {
scrollFunction()
}
scrollFunction();body{
height: 804px;
}
#myBtn {
display: none;
position: fixed;
bottom: 20px;
right: 30px;
z-index: 99;
border: none;
outline: none;
background-color: red;
color: white;
cursor: pointer;
padding: 15px;
border-radius: 10px;
font-size: 18px;
}
#myBtn:hover {
background-color: #555;
}<body>
<button onclick="topFunction()" id="myBtn" title="Go to top">Top</button>
</body>