How to set up scroll locations in a page

When constructing a website with many sections and a lot information, navigation tools become twice as important. One such tool is the scroll location, which can turn even an information overloaded page into an advantageous situation for a visiting viewer.

When a single page contains too much information, and cannot be further divided due to contextual limitations, scroll locations allow the user to instantly move to specific points in the page and access the desired content. This example is a page about a fictional 7 day event with a lot of bands and extra activities. Although a preview design, its the ideal example of information overload the viewer might experience.

Select a button you wish to turn into a scroll transition, and the on click option “go to page in this website”.  In the second dropdown menu that appears under it, you can select scroll locations. Since you have none made yet, select new scroll location.

This will create a horizontal line which can be dragged on the vertical axis, and establishes where the top of the viewer screen is placed by the transition.

The thin blue line is the scroll location. The positioning of the page content before and after the section you are visiting, will affect whether you should go for a strict, field of view (where the very top of the viewer’s perspective is precisely the point where the section he wants to visit begins) or leave some space before it, for a less strict sentiment. If elements of the previous section interfere with the field of view the result can look awkward. The proper positioning of the scroll location would leave breathing room and is clean:

In this example the artists below can be cropped, but since the top and major part of their portraits is visible, the result is creating interest and pulling attention into the next section.