All About Circuits

Button back to the top of the page.

DickCappels

DickCappels

Joined Aug 21, 2008
8,702
I suspect that killivolt is referring to an HTML button on the webpages to take us back to the top. I think that is a great idea if it can be done with HTML. I cannot count the number of times I manually scroll to the top of pages each day.
 
ElectricSpidey

ElectricSpidey

Joined Dec 2, 2017
2,146
In my browser there is already a "back to top" button.

To make it appear, you simply start to scroll up.

Of course it is located on the opposite side of the page to where I normally rest my curser. :(

Button.jpg
 
Reloadron

Reloadron

Joined Jan 15, 2015
6,580
Not sure what you are asking but if you want to add a scroll to top button to a web page there are several ways to do it in HTML, JAVA, using CSS and more. A simple Google of "scroll to top button" should get you a dozen code examples.

Ron
 
Reloadron

Reloadron

Joined Jan 15, 2015
6,580
This explains what most of us are seeing. There really isn't much to the HTML code:

Code: 
<button onclick="topFunction()" id="myBtn" title="Go to top">Top</button>
Then they use CSS to make the button itself and it looks like this.

Code: 
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 20px;
}

#myBtn {
  display: none;
  position: fixed;
  bottom: 20px;
  right: 30px;
  z-index: 99;
  font-size: 18px;
  border: none;
  outline: none;
  background-color: red;
  color: white;
  cursor: pointer;
  padding: 15px;
  border-radius: 4px;
}

#myBtn:hover {
  background-color: #555;
}
</style>
</head>
<body>

<button onclick="topFunction()" id="myBtn" title="Go to top">Top</button>

<div style="background-color:black;color:white;padding:30px">Scroll Down</div>
<div style="background-color:lightgrey;padding:30px 30px 2500px">This example demonstrates how to create a "scroll to top" button that becomes visible 
  <strong>when the user starts to scroll the page</strong>.</div>

<script>
//Get the button
var 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;
  document.documentElement.scrollTop = 0;
}
</script>

</body>
</html>
That tells the browser what to do. This can also be done in other languages. The above is HTML with CSS added.

Ron
 
Last edited:
You must log in or register to reply here.
Thread starter Similar threads Forum Replies Date
Alexeberk Induction heating machine button replacement General Electronics Chat 18
E Hold button for a couple of seconds to close circuit? General Electronics Chat 16
D what type of switch button is this General Electronics Chat 19
code_rp Push button connecting multiple inputs General Electronics Chat 2
MrSalts More button on Recent Posts page not working correctly Feedback and Suggestions 0
Similar threads
Induction heating machine button replacement
Hold button for a couple of seconds to close circuit?
what type of switch button is this
Push button connecting multiple inputs
More button on Recent Posts page not working correctly

You May Also Like

Top