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.
Thanks , it is perfect… any idea how to add some easing effects ??
Great post. Would the issue @Sawyer brings up only come into play on really long pages? The example Resig uses is Twitter’s infinitely scrolling pages.
this actually fails in Opera browser (which is just more “strict”) cause basically u’re animating at the same time both html and body and this is what Opera actually tries to do: animating both.
$(‘body,html’).animate({ …
so if you want to support also Opera, you should do something like:
if ($.browser.opera){
$(‘html’).animate({ … });
}
else
{
$(‘html, body’).animate({ … });
}
other browsers simply apply the animation to the html element OR the body element, depending on their scrolling implementation.
And yup I know $.browser to detect user agents is deprecated but I don’t see other ways to do it right now.
Ciao :-)
I’ve a rather reverse implemention of this scroll. In our company website, web you open a portfolio page, browser automatically scrolls the content for making visitors feel that, they are in a microsite. Here is the sample
$(window).load(function(){
if($(“body#portfolio”).length == 1)
{
$(‘html, body’).animate({ scrollTop: 75 }, 500);
}
});
http://www.iconpm.com/tr/portfolyo/hatko-sport-cdz
And as a bonus scroll :)
Here is a sample implementation for scroll to top & scroll to bottom
$(“.up a”).click(function(){
$(‘html, body’).animate({ scrollTop: 0 }, 500);
});
var pageHeight = $(document).height() + 250;
$(“.down a”).click(function(){
$(‘html, body’).animate({ scrollTop: pageHeight }, 500);
});
http://www.aydinozon.com/en/about-me
chek it out! http://elcasotudela.pe/ :) with the tutorials of web designer wall :) i still work in the autoresize with jquery for mobiles and tablets B)
you copy it hahahaha bad boy ^^
Beautiful job but I would remove the empty span tag and instead give the link some extra top padding and a background-image. Less mark-up. Yay!
Nice article. One point I’d make is that you’re technically calling the document ready function twice.
$(document).ready(function(){});
is exactly the same as
$(function () {});
the second of which you call in the middle of your first document ready function.
That was the first thing that caught my eye as well. But apart from that nice article!
Unfortunately not working well in Opera, which I use. Do you plan update? :)
Nice job! Is this cross browser compatible?
Nice job man, I searching this script for a week….
Doesn’t seem to work with JQuery 1.5.2 though… I had it working just fine with 1.4.3, which you included in the url…
hmmmm….
RN
I use jquery autoscroll script, that way it can animate to many places on my page.
The demo doesn’t work on my HTC Hero.
Nice. Any chance of a “scroll to anchor” writeup? There are certainly some poor articles about that specific topic out there on the internets.
many many thanks!
You have an amzing website Thank you so much
Simple and useful. Thank you.
In my opinion a better option is using an anchor link to the header element, sans-JavaScript. Just like in the 1990s.
I think a lot of this sort of animation satisfies the developer or site owner more than the users. They just want to be at the top of the document. Doubly so if their browser happens to render the animation slowly. My phone also does these little animations on menus and it just means I have to wait for no reason before taking my next action.
Interesting point there. Maybe we should disable any animated ‘frills’ on mobile devices. I would love to know what the ‘average’ user would vote about this. Unfortunately it is hard to get a ‘mass’ oppinion because average users will not be looking at sites where you can vote for your preference on a piece of web site functionality. BOO!
I’ve been thinking of adding this function in a site rebuild. Found this article outlining 7 different techniques:
http://www.net-kit.com/7-scroll-to-top-jquery-solutions/
Not sure what’s the best solution really, but I like the look of this :o)
thx for the URL, i liked the way of cratin’ the plugin’ ^^
Thank you, really useful if you have very long site, especially for tutorials site :)
Working on a personal site with a friend. This will be perfect thankyou.