Skip to main content
OCLC Support

URL fragment anchor link

  1. Last updated
  2. Save as PDF

 Link:  See a live example.

 View:  View source code in CONTENTdm Cookbook Demo Site.

A common customization is to create a table of contents or an alphabetic navigation bar to make it easier for users to scroll through a large amount of content or long lists of individual items. This type of navigation typically relies on a Hash URI to scroll the user’s browser window down to that section of the page. These are also known as URI fragments or URI fragment links. The hash value in the URL is typically based on the ID property of an HTML tag. Another approach is to use an HTML anchor tag (<a>) with the name property rather than the more traditional href property.

CONTENTdm’s website is a single-page application built with React.js. Because single-page applications are rendered dynamically in JavaScript, they do not work with the Hash URI model. This means the page has not fully rendered before the browser parses the hash value, so the browser cannot scroll the user to that location on the page.

This recipe addresses this limitation with additional JavaScript that waits for the page to fully render and then scrolls the user to the appropriate anchor. You can see this in action on the Cookbook Recipe Portal with the section hashtag buttons just below the header. The default configuration in this recipe assumes that you are using an ID property to identify the targets of your URL hashes. If you prefer to use <a name=”example_hash”> instead, you can edit the recipe code to identify targets that way.

 Note: 

This recipe is currently designed to work with custom HTML pages, since they are commonly used to create lengthy lists of content that require clickable hashtag-based navigation. To make this recipe work on your custom HTML page, you will need to specify the name of your custom page within the JavaScript.

If you intend to create this type of navigable content on your CONTENTdm home page or within a built-in collection landing page, then you will need to modify the document.addEventListener() stanzas in the recipe code to make sure it fires on the correct page.

To install this recipe:

  1. Download the JS file from the Cookbook Recipe Portal.
  2. Find these lines in the code:

const allCustomPages = true;

const customPage = ['']; //specify name of custom page(s) where script should run

If the script can run on all of your custom pages, then make no changes to the code. If your code should run on specific custom pages, then you will need to add the name of your custom page(s) to the code. For example, if your hashtag navigation is on a page called “glossary”, then modify the above two lines to look like this:

const allCustomPages = false;

const customPage = ['glossary']; //specify name of custom page(s) where script should run

  1. Save your changes to the JavaScript and upload the file as a Custom Script in the website configuration tool.

As with all JavaScript-based customizations in the Cookbook, you can create custom JavaScript functions that affect specific collections or integrate with other recipes.