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.
Thank you very much for the great tip!
- Jonathan
nice and very useful technique, thx a lot!!
I got a similar script but to scroll to both sides (top and bottom), but that was for my previous site, I’m going to implement this in my current site, thanks for sharing! :)
This is exactly what I was looking for just as I was ready to use it. Great stuff as always.
Very good, we have seen a new thing here
Hi, does this conflict with mootools? i have tried it on a site, but it’s not srolling smoothly on pages that are linked with mootools, it also doesn’t hide the image on these pages, any idea how i can fix this?
Nice Stuff, had to move the click function id to “#back-top” rather than “#back-top_a” after inserting this into my site to get it to scroll. Before this edit, the button would hide and reappear but the page just snapped to the top with no animation. Looks great.
Nice tip. But may I just add something I noticed. In your code:
if ($(this).scrollTop() > 100) {
$(‘#back-top’).fadeIn();
}
You’re calling “$(‘#back-top’).fadeIn();” almost on every scroll event. I know this isn’t such a performance hit. But some browsers seem to fire a lot of scroll events. I would rather cache the jQuery object and set a flag so that it doesn’t fadeIn() every time.
i wrote similiar code a few days ago, it is really simple:
$.extend( {
scrollTo: function(param, duration, event){ // @param – scrollTop value or id of the element you want to scroll the page
if(event) event.preventDefault();
if(typeof param === “number” && isFinite(param))
$(“html,body”).animate({scrollTop: param}, duration);
else
$(“html,body”).animate({scrollTop: $(param).offset().top}, duration);
}
});
You can use it in this way:
Scroll to photos
I’m have a problem with the screen flickering when I click on the link to scroll back to the top. Any chances what might be cousing this. I do have the anchor points set in case of no js as a fall back so you can see the flick of the top then it scrolls…
Cool. Wondering how do we make this work in Joomla. Thanks for the code download. we will try to experiment in a joomla article.
I was looking for such tutorial for along time . Thanks for sharing .
Thank you very much. This is a really helpful tutorial
Hello and my regards…
What a wonder to meet such great person on the Net just by typing search term “CSS tips”. I always go through your sites… They inspired me to try my hand on pages with such design, such spirit.
The wall is as sublime as the portfolio. You are a wonderful programmer and sharing your knowledge with us is a noble deed.
Awesome tricks by jquery.. I really like this tutorial and very helpful for me…
Thanks for post this add
Thanks for another very useful tutorial.
Thanks for sharing this code. Nice feature which is sure to find it’s way onto a site in the very near future.
very useful tutorial and helpful
thanks
Absolutely awesome, just created a new blog so going to implement this pronto… cheers dude/ess :)
Nice little trick, thanks for sharing.