Skip to main content
Drupal Documentation for SCLS

Main navigation

  • Home
  • How-To Info for Library Staff
  • Drupal 9
  • Help

Breadcrumb

  1. Home
  2. How-To Info for Library Staff
  3. Creating and Editing Website Content

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).
    Image
    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").
    Image
    Screen shot showing path changed to numerical equivalent
  4. After the numerical path, type "#" followed by the anchor name.
    Image
    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.

Image

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

Book traversal links for Anchor Links

  • Creating and Editing Website Content
  • Up
  • Disable/Enable Rich-Text
  • Managing Accounts for Your Drupal Site
  • Adding Images to Your Pages
  • Creating and Editing Website Content
    • Anchor Links
    • Disable/Enable Rich-Text
    • Display Differences Between the Editing Form and Published Content
    • Eliminate problem link and image references
    • Embed Codes
    • Forcing Links to Open in a New Window or Tab
    • Overriding Sitewide Theme Styling
    • Accordions (show/hide sections)
    • Adding menu links
    • Glorious Guide to Keyboard Shortcuts
  • Uploading Files
  • Changing Menu Links
  • Creating Photo Albums & Galleries
  • Folders, Directories, and File Structure
  • Managing Sidebar Blocks
  • Paths and URL Aliases
  • Configuring Site Information
  • Developer Permissions
  • Homepage Variations
  • Events/Programs with repeating dates
  • Registration for Events/Programs
  • What is Cron?
  • Avoid mixed content warnings (HTTPS/HTTP)
  • LINKcat Title List (Experimental)
  • Performance settings: Cache pages for anonymous users
  • Slick Carousel

Tags

accordion (1)
account (2)
anchors (1)
blocks (1)
cache (1)
carousel (2)
CKEditor (4)
configuration (1)
content types (1)
CSS (1)
disable rich-text (1)
Drupal 9 (18)
email (2)
embed code (1)
Entity Registration (5)
events (6)
file browser (2)
files (2)
files media (1)
folders (1)
formatting (2)
front page (3)
Google Analytics (1)
headings (2)
HTML (1)
iframe (2)
images (7)
imce (3)
Layout Builder (3)
link a pdf (1)
links (7)
login (1)
media (2)
menus (3)
nodes (1)
openid (1)
paste as plain text (1)
paths (4)
performance (1)
photo albums (1)
photo galleries (1)
redirects (3)
registration (5)
remove format (1)
repeat dates (2)
reports (1)
revisions (1)
sidebars (1)
site name (1)
slogan (1)
source (1)
sticky (2)
text formats (1)
themes (1)
toolbar (2)
URL aliases (4)
Webform (2)
widget (1)