An in-page navigation interface showing a table of contents sidebar with clickable anchor links and a scroll-to-top button for easy page navigation

Long Content Pages – Stay on Track with In-page Navigation

Being able to access the necessary information quickly and efficiently is essential for our employees today. Particularly with extensive content pages, this can pose a challenge. With our in-page navigation, we offer a solution that not only enhances clarity but also maximises user-friendliness.

Nicole Beck Dekkara
Nicole Beck Dekkara
2 minutes to read

Our challenge

Our employees want to find the information they need with just a few clicks and find everything related to a specific topic on one page if possible. In our case, there is a lot of content that needs to fit on a single content page, such as our product pages. A content page, therefore, becomes extraordinarily long, and scrolling takes time. How can we ensure that our colleagues quickly identify if the desired information is available and its exact location upon opening a content page? How can they get there quickly? How do we support our publishers in publishing latest content pages quickly and easily?

Our goal

An automated solution to display the page structure at the beginning shall save publishers time when creating or updating a page. Our colleagues can quickly get an overview with the help of a table of contents and reach the desired content with one click. Furthermore, it should be possible to navigate through a page, no matter where you are, and return to any other point on the page with one click.

Our solution

In-page Navigation

Anchor Web Part

Thanks to the anchor web part, which is standardly placed on every page template, our publishers can immediately start filling in the content. By default, every H2 title becomes an anchor.

Anchors as Buttons

A list of four anchor buttons starting from the left to the right with 'Our Goals', then 'Our Goals' which is hovered with the mouse and shows another colour, then 'Our Solution' and lastly 'Conclusion'

Anchors as Numeric List

The same list with the four anchors button which were shown previously but this time with a top-down UI order and shown as a numbered list

Configuration

The web part can be configured; for instance, do I want to hide the last H2 title as it contains additional information? Or display all H3 and H4 titles as anchors as well? Do I want to change the display of the anchors into a list? All of this is possible with a single click in the web part properties.

The WebPart Property Pane showing the Anchor Configuration possibilites. A toggle which allows to switch the UI rendering from 'Anchor' to 'Anchor numbered list', three checkboxes allowing to process anchors of type H2, H3 and/or H4, a textbox to choose an Fluent UI icon name, and checkboxes to ignore the last or second last anchor tag

Scroll-to-Top Extension

If the extension is installed on a site, a scroll-to-top button will automatically appear on every page once scrolling begins. If the anchor web part is also placed on the page, the scroll-to-top button is extended with another menu button, which, when clicked, lists all anchors. Of course, these are clickable and lead to the desired section on the page.

The Anchor Flyout & Scroll to Top. The content show is equivalent to the anchors depicted in the other images on this post. This image depicts only those anchors in the context of the SharePoint Extension

Conclusion

The combination of these two solutions and their interaction are real time saver! Whether through automated anchors and scroll-to-top functions – we ensure that our employees always have the perfect overview. Our publishers can now create and modify content swiftly without the need to manually generate a table of contents. Therefore, this solution is clearly one of my and our absolute favourites in the intranet.