In long pages having large content divided into sections, it’s a good usability practice to provide links to different sections on the top of the page.
See this beautiful Site.
Here in this one page site News | About Me | Portfolio etc are links that jump you to a section on the page.
Also need for jumping (or better to say placing user’s eyes to right place) becomes necessary in some other cases as well. Let’s see a specific case here.
See this small usability issue in case of forbe’s list of world’s billionaires. There is pagination to see them in the order of there net worth. Now when you are on page 1 and are watching billionaire no 10. On clicking page 2 you would expect to see billionaire no 11. But you see billionaire no 16-20. This is just because page didn’t jump to the top of the list and since page links were down it just remained there.
We will see three different ways by which you could make your page jump to sections.
1. The classical
.
In the method the Section should have a named anchor as shown below
<a name=’aboutus’>About Us</a>
<div>
Your Content Goes Here…….
</div>
Now to jump to this particular section all you need to have is a link to same page with hash value “aboutus” appended to it.
<a href=’#aboutus’>About Us</a>
2. Using scrollIntoView.
Second way is using javascript to scroll to a particular element on page you identify the page element using document.getElementById and then use scrollIntoView method. You may use this in cases where using the above method is not an option.
document.getElementById(‘yourElement’).scrollIntoView();
3. Using jQuery.scrollTo.
And if your comfortable with jQuery you can use jQuery.scrollTo plugin the details of which are described well in the link below.
How to Jump to a section of a Page?
@tanmay The idea here is to bring up the point that the focus should be taken to the right target. Yes and i agree such results should come up with Usability Testing.