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

If you want a simple "Top" button that floats as you scroll down the page you can do this:

HTML:

Top

CSS:

/*Floating Back-To-Top Button*/
    #myBtn {
        position: fixed;
        bottom: 10px;
        float: right;
        right: 18.5%;
        left: 77.25%;
        max-width: 30px;
        width: 100%;
        font-size: 12px;
        border-color: rgba(85, 85, 85, 0.2);
        background-color: rgb(100,100,100);
        padding: .5px;
        border-radius: 4px;

    }
/*On Hover Color Change*/
    #myBtn:hover {
        background-color: #7dbbf1;
    }
 

      
      
      
      



  
Scroll down and click the button
  
Scroll down this frame to see the effect!
  
Scroll Baby SCROLL!!
  
Lorem ipsum dolor dummy text sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.



Top