Due to a number of requests, I'm writing a detail tutorial on how to create an animated scroll to top as seen on Web Designer Wall. It is very simple to do with jQuery (just a few lines of code). It checks if the scrollbar top position is greater than certain value, then fade in the scroll to top button. Upon the link is clicked, it scrolls the page to the top. View the demo to see it in action.

Design & CSS

Declare the #back-top elment with position:fixed so it stays fixed on the page. The span tag is optional. I added the span tag to display the arrow graphic. I also added transition:1s (1s = 1 second) to create the fading effect on mouse over.

Take a look at this step demo (note: the jQuery part is not implemented yet).

Below is the Javascript code (you can paste it any where on the page). Basically, it hides the #back-top element (it is the <p id="back-top"> tag in my demo) initially . Then it checks if the window scrollbar top position (scrollTop) is greater 100, then fade in the #back-top element, else fade out. The next set of code is the click function. If the #back-top link is clicked, it will animate the body scrollTop to 0.

No Javascript Fallback

Note the back to top button is linking to anchor #top which is the ID of the <body> tag. Technically speaking you don't need to assign any anchor link because jQuery can scroll the page to any position. However, it is nice to include it because it provides a fallback if Javascript is not supported.

Love the script! It was really easy to use and falls back nicely to quirks mode in IE. It’s not beautiful in IE, but what is???

I added a little opacity to soften it a bit and added display:none; to #back-top css. Why you ask? It was showing for a split second when the page loaded. I guess that is because my script was below the markup???

Also, I wonder how this renders in IE6 since we have position: fixed…

Thanks again, love this site!

James Weaver

LucaJan 28, 2012 @ 18:18

Very cool, and very easy to use.
Thank you so much!
I want use it in many of my project!
;)