Question

0

211

Views

Scroll-to-top button won't appear

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.

about 4 years ago · Juan Pablo Isaza

1 answers

Answer question

0

Answer question

Find remote jobs

Answer 1 · 2022-07-05T07:29:07.165Z

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>

0

211

Scroll-to-top button won't appear

1 answers

0

Find remote jobs

Andres GPT