URL fragment anchor link

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 target of the hash value in the URL is typically based on the ID property of any HTML tag. Another approach is for the target to be an HTML anchor tag (<a>) that relies on the name property rather than the more traditional href property.

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

This recipe corrects for this limitation with some additional JavaScript that waits for the page to render fully and then scrolls the user to the appropriate anchor in the page. You can see this working 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 function on custom HTML pages since they are commonly used to create a lengthy list of content that would 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 kind 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

3. 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.