How to make a back-to-top button using CSS and HTML only?

Question

What i\'m trying to do is kind of like a back to top button but to scroll down and up to a certain point on the page! Say for instance you have a long text and

Answer 1

Hope this helps somebody!

<style> html { scroll-behavior: smooth;} </style>
<a id="top"></>
<!--content here-->
<a href="#top">Back to top..</a>

Answer 2

<a id="topbutton" href="#top">first page </a>

Basically what you have to do is replace the " #top" with the id of the first section or your page, or it could be the nav... Any id locate in the first part of the page and then try to set some style with css!

Answer 3

<a href="#">Start of page</a>

"The link has the href value of "#", which by definition means the start of the current document. Thus there is no need to worry about the correct way of setting up the destination anchor..."

Source

Answer 4

Utilize the <a> tag.

At the top of your website, put an anchor with specified name.

<a name="top"></a>

Then your "back to top" link points to it.

<a href="#top">back to top</a>

Answer 5

I did my back-to-top button like this

<li class="nav-item"><a class="nav-link active" href="#home">HOME</a></li>   
    <button type="button" class= "btn btn-light" name="button" style="float: right;"><a href="#top">Top</a></button>

Answer 6

This is my solution, HTML & CSS only for a back to top button, also my first post.

Fixed header of two lines at top of page, when scrolled 2nd line (with links) moves to top and is fixed. Links are Home, another page, Back, Top

 <h1 class="center italic fixedheader">
  Some Text <span class="small">- That describes your site or page</span>
  <br>
  <a href="index.htm">&#127968;&nbsp;Home</a> <a href=
  "gen.htm">&#128106;&nbsp;Gen</a> <a href="#"
      onclick="history.go(-1);return false;">&#128072;&nbsp;Back</a> <a href=
   enter code here   "#">&#128070;&nbsp;Top</a>
  </h1>

    <style>
    .fixedheader {
    margin: auto;
    overflow: hidden;
    background-color: inherit;
    position: sticky;
    top: -1.25em;
    width: 100%;
    border: .65em hidden inherit;
    /* white solid border hides any bleed through at top and lowers text */
    }
    </style>