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

Question

I m trying to do a back to top button but to scroll down and up to a certain point on the page  For instance you have a long text and you want to bring the user to the next paragraph by simply having them to click on a link    I ve done it in the past but I can t remember how I did it for the life of me

User · Answer

I used a form with a single submit button. Point the "action" attribute to the ID of the element that needs to be navigated to. Worked for me with just "#top" without needing to define an ID in my stylesheet:

<form action="#top">
    <button type="submit">Back to Top</button>
</form>

Maybe a couple extra lines than is desirable but it's a button, at least. I find this the most concise and descriptive way to go about it.

User · Answer

HTML   lt a name  gettop  gt  lt  a gt    lt button id  btn  gt  lt a href   gettop  gt Back to Top lt  a gt  lt  button gt    CSS   btn         position  fixed      bottom  10px      float  right      right  20 5       left  77 25       max-width  90px      width  100       font-size  12px      border-color  rgba 5  82  248       background-color  rgb 5  82  248       padding   5px      border-radius  4px      font-family  Georgia   Times New Roman   Times  serif      On Hover Color Change   btn hover       background-color   fafafa

User · Answer

I did my back-to-top button like this      lt li class  nav-item  gt  lt a class  nav-link active  href   home  gt HOME lt  a gt  lt  li gt          lt button type  button  class   btn btn-light  name  button  style  float  right   gt  lt a href   top  gt Top lt  a gt  lt  button gt

User · Answer

If you want a simple  Top  button that floats as you scroll down the page you can do this   HTML    lt button id  myBtn  gt  lt a href   top  style  color  white  gt Top lt  a gt  lt  button gt    CSS    x000D   x000D    Floating Back-To-Top Button   x000D       myBtn   x000D          position  fixed  x000D          bottom  10px  x000D          float  right  x000D          right  18 5   x000D          left  77 25   x000D          max-width  30px  x000D          width  100   x000D          font-size  12px  x000D          border-color  rgba 85  85  85  0 2   x000D          background-color  rgb 100 100 100   x000D          padding   5px  x000D          border-radius  4px  x000D   x000D        x000D    On Hover Color Change   x000D       myBtn hover   x000D          background-color   7dbbf1  x000D        x000D    x000D   lt html gt  x000D   lt head gt  x000D         lt meta charset  utf-8  gt  x000D         lt meta http-equiv  X-UA-Compatible  content  IE edge  gt  x000D         lt meta name  viewport  content  width device-width initial-scale 1 0  gt  x000D         lt title gt  Simple Back To Top Floating Button  lt  title gt  x000D   lt  head gt  x000D   lt body style  background-color  rgba 84 160 245 0 51   gt  x000D   lt div style  padding 15px 15px 2500px font-size 30px  gt  x000D     lt p gt  lt b gt Scroll down and click the button lt  b gt  lt  p gt  x000D     lt p gt Scroll down this frame to see the effect  lt  p gt  x000D     lt p gt Scroll Baby SCROLL   lt  p gt  x000D     lt p gt 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  lt  p gt  x000D   lt  div gt  x000D   x000D   x000D   lt button id  myBtn  gt  lt a href   top  style  color  white  gt Top lt  a gt  lt  button gt  x000D   x000D   lt  body gt  x000D   lt  html gt  x000D   x000D   x000D

User · Answer

This is my solution  HTML  amp  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    lt h1 class  center italic fixedheader  gt    Some Text  lt span class  small  gt - That describes your site or page lt  span gt     lt br gt     lt a href  index htm  gt  amp  127968  amp nbsp Home lt  a gt   lt a href     gen htm  gt  amp  128106  amp nbsp Gen lt  a gt   lt a href           onclick  history go -1  return false   gt  amp  128072  amp nbsp Back lt  a gt   lt a href     enter code here       gt  amp  128070  amp nbsp Top lt  a gt     lt  h1 gt        lt style gt       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               lt  style gt

User · Answer

Hope this helps somebody    lt style gt  html   scroll-behavior  smooth    lt  style gt   lt a id  top  gt  lt   gt   lt  --content here-- gt   lt a href   top  gt Back to top   lt  a gt

User · Answer

Utilize the  lt a gt  tag   At the top of your website  put an anchor with specified name    lt a name  top  gt  lt  a gt    Then your  back to top  link points to it    lt a href   top  gt back to top lt  a gt

User · Answer

lt a id  topbutton  href   top  gt first page  lt  a gt    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

User · Answer

To add to the existing answers  you can avoid affecting the URL by overriding the link with JavaScript  This will still take you to the top of the page without JavaScript  but will append   to the URL    lt a href     onclick  document body scrollTop 0 document documentElement scrollTop 0 event preventDefault    gt Back to top lt  a gt

User · Answer

lt a href  quot   quot  gt Start of page lt  a gt    quot The link has the href value of  quot   quot   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    quot  Source

User · Answer

What you would want to do is put an  quot anchor quot  at the top of the page  using an  lt a gt  tag  it s not JUST useful for links    Then  when you have a link that goes to  nameofanchor  it scrolls to the anchor with that name  You d do it like this   lt a id  quot top quot  gt  lt  a gt   lt  --content here-- gt   lt a href  quot  top quot  gt Back to top lt  a gt   Here is a working jsfiddle  http   jsfiddle net qf0m9arp 1

User · Answer

This is the HTML only way    lt body gt   lt a name  top  gt  lt  a gt  foo content foo bottom of page  lt a href   top  gt Back to Top lt  a gt   lt  body gt    There are quite a few other alternatives using jquery and jscript though which offer additional effects  It really just depends on what you are looking for

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

Examples related to html

Examples related to css