Anchor Links

An anchor link or "jump" link points to a specific point on a web page, instead of the default top of page. They are often used in tables of contents and FAQ lists.

Step 1: Create the anchors

Follow the steps to create anchors (provided by the developers of the CKEditor editing tool we use in Drupal).

Step 2: Make links with the URL destination as the anchor

In a field where the CKEditor toolbar is available

Follow the steps to make links to the anchors (provided by the developers of the CKEditor editing tool we use in Drupal).

In a menu link

The URL path for a menu link to an anchor in a Drupal content page will look similar to this example:

node/10#youranchorname

In your menu links, the "10" in "node/10" should be replaced with the number Drupal gave your destination page, and "#youranchorname" should be replaced with the name you gave the anchor.

  1. For the menu link's path, enter the destination page alias. It will look like "your-page-topic" (see Paths & URL Aliases for more info).
    Screen shot showing menu link Path field
  2. Save the menu link.
  3. Edit the menu link again. In the Path field, Drupal will have changed the URL alias to its numerical equivalent (similar to "node/10").
    Screen shot showing path changed to numerical equivalent
  4. After the numerical path, type "#" followed by the anchor name.
    Screen shot of menu link with numerical path and anchor name
  5. Save the menu link again.

You can compress steps 1-4 if you find out the page's node number first. On the Content screen, hover over the page's edit link and note the path in the status bar. The node number is part of the page's edit link, so it is visible in the status bar when hovering over the edit link, or in the address bar when editing the page.

Step 3: Test your links

Try the links to make sure the point to the correct destinations. If you have placed the anchors before/beside headings, when you test the links, the heading may appear "cut off" when you jump to it. Don't panic! Drupal's admin toolbar covers up the top of the screen, and the heading should be visible if you test the links while you are logged out (like a patron will be).

Tags: