All About Circuits

Button back to the top of the page.

DickCappels

DickCappels

Joined Aug 21, 2008
9,877
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,437
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
7,193
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
7,193
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
A Simulating button press on monitor using transistor and arduino General Electronics Chat 19
Owari How to make a reset button on a digital clock (HELP) Homework Help 3
J How to use an emergency stop Push Button switch Power Electronics 10
H one push button motor controler Automation, Robotics & Control 22
MrSalts More button on Recent Posts page not working correctly Feedback and Suggestions 0
Similar threads
Simulating button press on monitor using transistor and arduino
How to make a reset button on a digital clock (HELP)
How to use an emergency stop Push Button switch
one push button motor controler
More button on Recent Posts page not working correctly

You May Also Like

Top