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.

Demo Scroll to Top

Download Demo Zip

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).

back to top image

#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 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.

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

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>


	// hide #back-top first
	// fade in #back-top
	$(function () {
		$(window).scroll(function () {
			if ($(this).scrollTop() > 100) {
			} else {

		// scroll body to 0px on click
		$('#back-top a').click(function () {
				scrollTop: 0
			}, 800);
			return false;


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.


1 9 10 11
  1. Dharmendra
    Oct 2, 2012 @ 11:51 pm

    Nyc work Friend…!


  2. Sharon
    Oct 10, 2012 @ 10:46 am

    I got it to work but the span back to top png image is blank and it shows “SPAN<BACK TO TOP" text under it. I put the js code in the html. Any suggestions?


  3. Sharon
    Oct 10, 2012 @ 10:58 am

    Actually, I just had the id= code wrong. It’s working fine except there’s no arrow in the box. Which makes me think it’s not linking correctly to the png file. The link only goes in the css correct? I’ll figure it out.


    • impostor
      Nov 22, 2012 @ 12:31 am

      maybe u didn’t copy the arrow image, i downloaded the demo then copied the arrow image then paste…


  4. impostor
    Nov 23, 2012 @ 7:24 am

    the download demo works without internet but for the program that i created it only works with internet, the download demo used but still working without internet, anyone? pls!


    • impostor
      Nov 23, 2012 @ 7:33 am

      ***used src=”http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js”


  5. impostor
    Nov 23, 2012 @ 7:29 am

    if it doesn’t work, maybe u should take note of the margin-left: -150px; in the #back-top, maybe…


  6. Nazmul
    Nov 26, 2012 @ 5:05 am

    so nice and useful


  7. Rob
    Dec 6, 2012 @ 2:50 am

    I love this so much!! I was out searching for something similar to this back to the top button and everything here is EXACTLY what I needed to finish my project!! Thank you so much!


  8. Jibin
    Jan 24, 2013 @ 11:23 pm

    Can any one convert this piece of code to Vanilla js (Pure js)? Just so i can understand how this all works?


  9. Dhanushka
    Jan 29, 2013 @ 5:14 am

    Very nice. well done.. Really helpful to us..


  10. Ulli
    Jan 31, 2013 @ 6:18 am

    is this script working on xp?

    I use OSX and Windows 7 and it is working, but it dosn’t work with Windows xp?


  11. krishna
    May 24, 2013 @ 6:10 am

    thanks dear, this is very helpful to me…


  12. kinnngg
    May 27, 2013 @ 1:50 pm

    Not Working!


  13. Sagar
    May 29, 2013 @ 3:00 am

    Thank man . . . Dat’s what i need . . . Clean and Simple


  14. Kenny Vo
    Jun 8, 2013 @ 9:14 am

    This is useful tutorials, thank so much!


  15. Paul
    Jun 12, 2013 @ 8:05 am

    Thanks I really like this solution and have implemented this in my website. However I have noticed that if you click the ”Back to Top” button multiple times and then you try to scroll down it causes the window to keep scrolling back to the top. Any idea how to stop this happening anyone?


  16. 7themes
    Jan 11, 2017 @ 5:56 pm

    It was great, thank you, I’ve used it in my site


  17. Madhivarman
    Mar 12, 2017 @ 1:27 pm

    acutally for animation part moving top to the webpage we need only this code

    scrollTop : 0

    and all other are css for button work…Thanks a lot for this great work admin… :)


  18. Madhivarman
    Mar 12, 2017 @ 1:29 pm

    i think the button works the way the number of times you click…to avoid this use preventDefault option in jquery

    $(‘button’).on(‘click’ , function(e){
    //do your stuff here


1 9 10 11

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.