Scrolling back to top button
Back to top buttons are great in allowing users to quickly move to the top of a page. They should be located at the bottom of page and are best utilised when pages are long. This prevents excessive scrolling and adds that extra little functionality to a website.
Beware that links and buttons on websites generally traverse to a new page. This functionality happens so often that users expect it with each click. Once a button is created that does not load a new page, a user may become a little disorientated. For example clicking a back to top button for some users may lead them to believe the current page will be loaded again from the top.
To set up a back to top button we need to do two things, first create an id attribute on a tag within our body and second, created the link to traverse to the id. One trick that we can use is to add an id to our body tag, that way we keep our HTML clean.
<body id="body">
<a id="scroll-to-top" href="#body">Back to top</a>
One of the major rules of usability states that each action must have an accompanying reaction that communicates to the user what they did was received. Not only does the reaction communicate that a message was received, but a reaction that also shows what is happening is even better.
In the case of the back to top button, the page moves to the top immediately with no indication of what has happened. This is so fast that a user may get confused. Therefore it is better to show some indication that we are traversing to the top of the page. To achieve this functionality we just need to add some little jquery magic.
$('#scroll-to-top').click(function() {
$('html, body').animate({scrollTop:0}, 'slow');
return false;
});
Back To Top
Try out the back to top link and the page should scroll up giving that extra bit of information for our users who use our back to top buttons.
