Cornell AAP
Search
Cornell AAP Site Documentation

Cornell AAP Site Documentation

Reference: Jump Links

Creating Jump Links

The jump links bar highlights the active section as you scroll.

Add a jump link bar to long pages so users can easily navigate to a particular section and understand where they are as they scroll. Users can also bookmark and share URLs with the anchor identifier at the end (aap.cornell.edu/example-page#section-heading).

The jump link bar is available on Default pages, Degree pages, and Event pages.

  1. First, build out your page content with headings, body text, and other Gutenberg blocks. We recommend creating jump links for each Heading 2 only, and about 4-6 of these headings in a page.
  2. With your cursor in a heading, click Block →Advanced in the right-hand sidebar and add an HTML anchor. This string should be all lowercase with no spaces. It need not match the heading text exactly, but it must be unique to the page. So for “Applying As a Transfer Student” heading, either applying-as-a-transfer-student or just transfer-applications would be fine.
  3. Once you have added HTML anchor created, re-save the post. The template will add a sticky On this page bar (or Event Details for Events) with jump links to each heading.