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
Anchor Fragment Way
In the method the Section should have a named anchor as shown below
<a name=’aboutus’>About Us</a>
Your Content Goes Here…….
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.
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?