It’s the little things on sites that often make you want to return. I am a massive fan of sites that feel light and free. Where when you click on things, it does things you don’t always expect or aren’t programmed in your mind to accept will happen. Things where you think “That’s a nice touch, why didn’t I think of that?”
So onto my point, here is a little touch that I often add to sites that I like to see happen. It’s simply having a ‘Back to top’ button at the foot of the page that once clicked, scrolls you up with an animation rather that a page refresh or a straight jerk to the top again.
Using the jQuery scrollTo plugin, you can achieve, what I see to be, a sweet scrolling animation.
Implementing scrollTo to scroll to top using jQuery
I’ll briefly outline the steps you will need to take to implement this, but more documentation and some better example can be found on the plugin site.
1. Download the js file that you will need and stick it in your site somewhere.
2. Include the js file into the page you want it on.
3. Initialise the function, so that when the link is clicked, it will perform the animation you want, with the speed you set and where you want it to scroll to. Then add the link you want to move you to the top.
Here is an example of the code you might use to do this:
<script type=“text/javascript” src=“js/jquery.scrollTo.js”></script>
<script type=“text/javascript”>
$(document).ready(function()
{
// scroll to top
$(‘a.topOfPage’).click(function(){
$.scrollTo( 0, 500);
return false;
});
});
</script><a href=“#” class=“topOfPage”>Top of page</a>
Here I have used jQuery to initialise the function when the a link with the class ‘topOfPage’ is clicked.
Once this is clicked, it uses the scrollTo plugin to go to the top of the page (as I have used 0 for the position) and with a speed of 500 milliseconds.
Arguments accepted
scrollTo accepts the following arguments:
$.scrollTo( target, duration, settings );
Target can either be an element such as an id of an element (#elementName) or a class (.className) or simply the position on the page you want (’44’, ‘100px’, ‘+=30px’, etc).
Duration is the length of time in milliseconds that you want it to take to reach the destination.
Settings is basically a list of other parameters that you wish to pass to it, more information on these can be found here.
Example using scrollTo
An example of how I have implemented it in a site can be seen here. Just scroll down to the bottom and click the ‘Top’ link and it should scroll up nicely for you.
Like I said, it’s attention to detail like this on sites that I really like to see. You can take this how you like and use it to scroll up, down, across etc.
I’m going to be putting a lot of that into the making of a personal project Betheiddleman.com. Things like live validation, thickbox login boxes and more. So watch this space…