Jump Links

Jump links can be used to quickly link to specific parts of a page. When a jump link is clicked, the visitor is brought to that area of the page instead of remaining at the top.

When you have long pages of content, you may need a way for your site visitors to browse easily and efficiently through the content. Jump Links facilitates this.

How Jump Links Work

All jump links have some "anchor" on the page with a name. This anchor is located on the page where you want users to be brought to when they use that link.

Users are linked to that anchor by accessing the main page URL with the anchor name appended with a hash. For example, if you have page /some/page with a jump link anchor named "training", you can create a jump link using the following path: /some/page#training

Manually Adding Jump Link Anchors

Within Text

The WYSIWYG editor interface has a toolbar icon to insert a jump link anchor.

ckeditor toolbar with anchor icon circled

Move your cursor to an area in the text editor where you want to create the anchor, and then press the flag icon in the toolbar. Select a name for the anchor that is short. It's best not use multiple words or symbols.

After the page is saved, you should be able to link users to those anchors by appending a hash symbol (#) and the name of the anchor.

To Blocks on a Page

All blocks added to pages can also have jump link anchors associated with them. When adding or editing blocks, the bottom of the form has a field called "Jump link ID" which can be used to assign the anchor name.

jump link id field on block forms

The anchor will be placed on the page directly before the block title. They behave just like the anchors created in the text editor.

Automatically Creating Jump Link Menus

The Page content type has a unique feature for automatically create jump link anchors and a jump link menu on the page. It can be enabled on a page by expanding the "Menu settings" group in the right sidebar on the page form and checking the box "Create jump link menu".

When activated, jump link anchors are automatically created for every Level 2 (H2) heading on the page, including those that come from block titles.

A "sticky" menu (follows user as they scroll down) is also created for each anchor. Where this menu appears and how it looks depends on your site's theme and it's settings.

This can be very helpful when creating a page with a lot of content and headings. The jump link menu acts as a light weight outline of the pages content with a way to quickly jump to each section.

Jump Links Menus and Sidebar Menus

WDS recommends that you refrain from using Jump Links with secondary/tertiary sidebar menus as this will create an unpleasant user experience on your website.  We recommend hiding your secondary/tertiary menu on the page or simply using a horizontal secondary/tertiary menu for your sub navigation to allow users to easily click through your jump links.