Anjan Dutta

Back to top link using html and Javascript

Back to top link using html and Javascript

Created On: 13/09/2021

To create a back to top link we can use the window.scrollTo(0, 0); function.

This function sets the focus on the 0,0 coordinate.

Try the code below:

HTML

<html>
  <head>
    <title></title>
  </head>
  <body>
    Checkout my <a href="https://anjandutta.com">blog</a> for more tutorial. 
    
   <div class="back-to-top-link" onClick="toTop()">Back To Top</div>
  </body>
</html>

CSS

body {
  height: 1000px;
}
.back-to-top-link {
  position: fixed;
  bottom: 10px;
  right: 30px;
  cursor: pointer;
}

JS

function toTop(){
  window.scrollTo(0,0);
}

Thanks for reading.

Next