Scroll up button without javascript

Question

I want this, but without javascript:

https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_scroll_to_top

And also I want the button to lead me to the element h1 id="bob"

<html>
   <head>
      <style>
         #btn {
         display: none;
         position: fixed;
         bottom: 10px;
         right: 10px;
         z-index: 99;
         font-size: 15px; 
         border: none;
         outline: none;
         background-color: gray;
         color: darkgray;
         cursor: pointer; 
         padding: 15px;
         border-radius: 4px;
         }
         #btn:hover {
         background-color: white;
         }
      </style>
   </head>
   <body>
      <button onclick="#top" id="btn"></button>
      <h1 id="top">Hoy!</h1>
      <pre>
.
.
.
<!-- here I put a lot of dots to make the page scrollable -->
.
.
.
</pre>
   </body>
</html>

@epascarello he will face this problem because of not using a link, but now he doesn't know how to show the button (or the link whatever) when the user scrolls down. I think he also wants to hide the element when the user scrolls to the very top — Mohamed Waleed, Aug 02 '21 at 20:41
@Twinsen you can use a link (anchor) and give it the button styling with css, or you can use a button but you need to use a link inside it. — Mohamed Waleed, Aug 02 '21 at 20:43
https://stackoverflow.com/questions/710089/how-do-i-make-an-html-link-look-like-a-button — epascarello, Aug 02 '21 at 20:49

tblev · Accepted Answer · 2021-08-02T21:47:01.043

First of all, terrible formatting in the question.

Make sure your links are clickable.
Make your html/css code a snippet, which would solve the code formatting issue and make people happier and more willing to help you out. Using a Css Beautifier/HTML Beautifier also helps the positivity of the post.
Show what you've previously done, this question could've easily been answered by yourself with a W3 guide on smooth scrolling
You also can't see your button because of your css display:none on #btn.

html {
    scroll-behavior: smooth;
}
body {
     height:1000px;
}
 #top{
}
 #middle {
     margin-top:500px;
}
 #btn {
     position: fixed;
     bottom: 10px;
     right: 10px;
     z-index: 99;
     font-size: 15px;
     border: none;
     outline: none;
     background-color: gray;
     color: darkgray;
     cursor: pointer;
     padding: 15px;
     border-radius: 4px;
}
 #btn:hover {
     background-color: white;
}

<html>
  <body>
    <h1 id="top">Hoy!</h1>
    <h2 id="middle">Middle!</h2>
    
    <a href="#top" id="btn"></button>
    
  </body>
</html>

@AmirrezaAmini I think you're tripping dawg. I copied the css from the question, it's not a copy and paste from someone else's answer. — tblev, Aug 02 '21 at 21:41
That's the proper answer. Thank you very much! Sorry about the link. I couldn't manage to correct it even editing the post. — Twinsen, Aug 02 '21 at 22:25

score 2 · Answer 2 · answered Aug 02 '21 at 20:48

You can use an anchor tag with the href attribute. For example, you have the following basic HTML structure:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>My App</title>
</head>
<body id="body">
  <!--lot of sections here -->

  <a href="#body">Back to Top!</a>
</body>
</html>

You only need to set an id to an element, then with your anchor tag set the attribute href with the value of an "#" followed by the id of your top element.

score 0 · Answer 3 · answered Aug 02 '21 at 20:49

Simply make a <a href="#"></a> tag and set the href to #. This will get you on top of the page.

* {
  scroll-behavior: smooth;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box
}

article {
  width: 100vw;
  height: 100vh;
  background-color: #ff0000
}

a {
  position: fixed;
  bottom: 20px;
  z-index: 999;
  right: 10px;
  padding: 10px;
}

<article></article>
<article></article>
<article></article>
<article></article>
<article></article>
<a href="#">Top</a>

Mohamed Waleed · Answer 4 · 2021-08-02T21:25:11.437

Check this out: code example

The link has the style of a button and only shows when the user scrolls down and it hides when the user scrolls to the very top.
The trick here is to override the link with another hidden link but with an absolute position.

In order for this to work:

The two links should have exactly the same style and contents.
The hidden link should have the same background as the body.
The hidden link should have text color property the same as the background-color property of the body.
The hidden link should be positioned as absolute.

Note: you can use smooth scrolling (scroll-behavior: smooth;) to make it scroll with a simple animation

body {
  margin-top: 0;
  padding-top: 0;
  background-color: white;
  height: 5000px;
}

#top {
  position: absolute;
  top: 0;
  left: 0;
}

.btn {
  position: fixed;
  bottom: 10px;
  right: 10px;
  z-index: 99;
  font-size: 15px;
  border: none;
  outline: none;
  background-color: gray;
  color: darkgray;
  text-decoration: none;
  cursor: pointer;
  padding: 15px;
  border-radius: 4px;
}

.btn:hover {
  background-color: white;
}

.hidden-btn {
  position: absolute;
  background-color: white;
  color: white;
  cursor: inherit;
}

<div id="top"></div>
<a class="btn" href="#top"></a>
<a class="btn hidden-btn"></a>
<h1>The top is here.</h1>

Scroll up button without javascript

4 Answers4