How to make webpage scroll to top of page using jquery

I remember me always trying to figure out how to make a page scroll to certain section of a website. I mean it was like magic when I first came across it. I was stun! I later tried to find tutorials on how to do it and let me tell you I had no luck. In this tutorial I will teach you how to add a nice anchor link scroll effect to your website using jquery/ HTML.

How does it work

Whenever you click on a certain link, the page will scroll to that specific link. For example if were to have a long portfolio page and it took forever to reach the bottom I might want to add a link at the bottom of my website that says Back to top and when visitors click on that link the page would scroll to the top.


Add code below to head section or to a separate javascript file. Tells the document to scroll


Add the code below after your head section. I did not include the entire html but you can download it or view the demo.

Joe Granados the author

Joe Granados is the owner of WebDevTuts. He is also a web designer & developer who loves to design and develop websites. If you're looking for him you can find him via @webdevtuts
  1. Fraser Revie says:

    This code is simple enough but if you wanted to use an external JavaScript you could use something called tinyscroll, it would do what arbel-designs did in their piece. Sorry it’s a bit outdated but thought it could prove useful if somebody else wanted to know.

Leave a Reply