All About Circuits

Button back to the top of the page.

DickCappels

DickCappels

Joined Aug 21, 2008
7,453
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
1,681
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
5,935
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
5,935
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
T Toggling Lights with a push button General Electronics Chat 9
C Momentary button to power a load for 5 minutes General Electronics Chat 1
Rumbaar 4066 Bi-Lateral switch versus Transistor to emulate a button push of roller shutter controller Analog & Mixed-Signal Design 22
p3triix Counter that counts from 99 to 00 with start/pause button. Homework Help 80
Pushkar1 Microcontrller & Push button Microcontrollers 23
Similar threads
Toggling Lights with a push button
Momentary button to power a load for 5 minutes
4066 Bi-Lateral switch versus Transistor to emulate a button push of roller shutter controller
Counter that counts from 99 to 00 with start/pause button.
Microcontrller & Push button

You May Also Like

Top