Animated Scroll to Top

Apr 11, 2011 ? Tutorials → Coding, Javascript

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

Demo Scroll to Top

Download Demo Zip

Design & CSS

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

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

#back-top {position: fixed;bottom: 30px;margin-left: -150px;}#back-top a {width: 108px;display: block;text-align: center;font: 11px/100% Arial, Helvetica, sans-serif;text-transform: uppercase;text-decoration: none;color: #bbb;/* transition */-webkit-transition: 1s;-moz-transition: 1s;transition: 1s;}#back-top a:hover {color: #000;}/* arrow icon (span tag) */#back-top span {width: 108px;height: 108px;display: block;margin-bottom: 7px;background: #ddd url(up-arrow.png) no-repeat center center;/* rounded corners */-webkit-border-radius: 15px;-moz-border-radius: 15px;border-radius: 15px;/* transition */-webkit-transition: 1s;-moz-transition: 1s;transition: 1s;}#back-top a:hover span {background-color: #777;}

jQuery Part (Demo)

Below is the Javascript code (you can paste it any where on thepage). Basically, it hides the #back-top element (it is the tag in my demo) initially . Then it checks if thewindow scrollbar top position (scrollTop)is greater 100, then fade in the #back-top element, else fade out. Thenext set of code is the click function. If the #back-top link isclicked, it will animate the body scrollTop to 0.

If you want to learn some basic jQuery coding, read my jQuery for Designers tutorial.

No Javascript Fallback

Note the back to top button is linking to anchor #top which is the IDof the tag. Technically speaking you don't need to assignany anchor link because jQuery can scroll the page to any position.However, it is nice to include it because it provides a fallback ifJavascript is not supported.