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>

<script>
$(document).ready(function(){

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

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

});
</script>

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.

244 Comments

1 9 10 11
  1. Keisa
    Sep 18, 2012 @ 12:51 am

    I tried it out and it doesn’t work on my site either. Using Chrome as well.

    Reply

    • Roland
      Oct 2, 2012 @ 11:42 pm

      @keisa- how does it work in other browsers?

      Reply

  2. Bernd
    Sep 24, 2012 @ 5:05 am

    @Keisa: Any fix or workaround for this ? Don’t know what’s changed in chrome. Maybe selfhealing in the next update..?

    Reply

  3. Dharmendra
    Oct 2, 2012 @ 11:51 pm

    Nyc work Friend…!

    Reply

  4. 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?

    Reply

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

    Reply

    • 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…

      Reply

  6. 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!

    Reply

    • impostor
      Nov 23, 2012 @ 7:33 am

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

      Reply

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

    Reply

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

    so nice and useful

    Reply

  9. 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!

    Reply

  10. 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?

    Reply

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

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

    Reply

  12. 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?

    Reply

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

    thanks dear, this is very helpful to me…
    thanks

    Reply

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

    Not Working!
    :(

    Reply

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

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

    Reply

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

    This is useful tutorials, thank so much!

    Reply

  17. 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?

    Reply

1 9 10 11

Leave a Reply