html button to go up

Solutions on MaxInterview for html button to go up by the best coders in the world

showing results for - "html button to go up"
03 Jan 2017
1<!DOCTYPE html>
2<html>
3<head>
4<meta name="viewport" content="width=device-width, initial-scale=1">
5<style>
6body {
7  font-family: Arial, Helvetica, sans-serif;
8  font-size: 20px;
9}
10
11#myBtn {
12  display: none;
13  position: fixed;
14  bottom: 20px;
15  right: 30px;
16  z-index: 99;
17  font-size: 18px;
18  border: none;
19  outline: none;
20  background-color: red;
21  color: white;
22  cursor: pointer;
23  padding: 15px;
24  border-radius: 4px;
25}
26
27#myBtn:hover {
28  background-color: #555;
29}
30</style>
31</head>
32<body>
33
34<button onclick="topFunction()" id="myBtn" title="Go to top">Top</button>
35
36<div style="background-color:black;color:white;padding:30px">Scroll Down</div>
37<div style="background-color:lightgrey;padding:30px 30px 2500px">This example demonstrates how to create a "scroll to top" button that becomes visible 
38  <strong>when the user starts to scroll the page</strong>.</div>
39
40<script>
41//Get the button
42var mybutton = document.getElementById("myBtn");
43
44// When the user scrolls down 20px from the top of the document, show the button
45window.onscroll = function() {scrollFunction()};
46
47function scrollFunction() {
48  if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
49    mybutton.style.display = "block";
50  } else {
51    mybutton.style.display = "none";
52  }
53}
54
55// When the user clicks on the button, scroll to the top of the document
56function topFunction() {
57  document.body.scrollTop = 0;
58  document.documentElement.scrollTop = 0;
59}
60</script>
61
62</body>
63</html>
64