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).
#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.
when pressed on “demo ” near “Take a look at this step” i got 404 error
good, simple and in some cases useful tutorial
Just fixed the demo link.
It’s a great tutorial and it does scroll back to top on Chrome browser, thanks a lot. Unfortunately, it doesn’t scroll on my Firefox 4 and in the “Design & CSS” part, the demo link is broken. A quick fix would be highly appreciated.
demo seems broken in ff 4/os x, works on this page
Same here, on Win 7.
same in ff4 on xp
It should be working with Firefox now. I added the ‘html’ element in the animate function.
Works fine for me.
Blah
in Design & CSS from tutorial above, demo link: http://webdesignerwall.com/tutorials/demo-scroll-top/scrolltotop-step1.html, not found. Thanks…
Same here, demo broken in FF4 / Linux, but works on this page
your demo doesn’t work in firefox 4
Just what I was looking for, thanks a bunch!
I see that it uses Webkit transition but this doesn’t work in Firefox 4 or IE9
It works using if I use $(window) instead of $(‘body’), but it doesn’t animate. It just jumps to the top.
http://jsfiddle.net/J5vwm/
Too bad this one don’t support more browsers, Fixefox is a must for me.
It is fixed now. Should be working with Firefox.
Nice article :)
I also made an implementation of this that works on every browser: http://radumicu.info/blog/2010/02/20/animated-top-link-that-works-on-every-browser/
I’ve used similar code except I animate on both the html and body elements. Seems to have better cross-browser compatibility.
[code]
$('span.tothetop').click(function() {
if($(window).scrollTop() > 0) {
$("html, body").animate({scrollTop:"0px"},1000);
}
});
[/code]
Hi,
It must be working… if you put a #top anchor on the top of the page.
That’s not animated scroll
Love the scrolltop / animate functions in jQuery, weird it never works well in Opera, but at least not many people use that thankfully.
I’ve also always done $(‘html,body’).animate(….
Not sure if the added html makes any difference though
Hey, why thankfully?! The fact it doesn’t render these particular jQuery functions on this particular site doesn’t mean the whole browser is bad.
P.s. By the way, before the redesign the scroll worked perfectly well in Operas 9-10. If the code remained unchanged only then it’s a browser related bug imho.
Yap some here not working FF4. Perhaps some mistakes on the function.
Hello guys, I wrote a similar article, in Italian, on my blog recently :)
I forgot the url: http://www.christianrodero.it/blog/2010/jquery-tips-torna-su-che-appare-quando-scrolli-la-pagina/
Bit Sh1te. doesn’t work for me in FF4
When I saw your scroll to top button, I furiously tried to figure out how to do it. After many attempts I did, but so glad to finally have all the info in one place! Thanks!
Nice tutorial Nick, however it’s recommended that you use setInterval so that you aren’t firing the function every time a user scrolls (Twitter learnt this the hardway). Check out this quick article written by John Resig on this topic: http://ejohn.org/blog/learning-from-twitter
sweet, thanks