Skip to content

Anchor Links

Sarah Carney edited this page Oct 1, 2020 · 3 revisions

Enable anchor link in WYSIWYG text format

  1. admin/config/content/ckeditor
  2. Edit the WYSIWYG profile
  3. Under Editor Appearance, add the flag icon to the current toolbar, preferably with the other link icons.
  4. admin/config/content/formats/wysiwyg
  5. WYSIWYG Filter tab
  6. We need to adjust the HTML attributes allowed on a elements: allow a without an href, and allow an a to have an id.
  7. Change a[!href|target|title], to a[href|target|title|id|name],

Make sure the sticky menu doesn't cover the anchor

A snipped of CSS in a custom styling module should handle this.

/* ------------------- */
/* ANCHOR LINK FIX
/* ------------------- */

html {
  scroll-padding-top: 100px;
}

Instructions for content editors

Create an anchor

  1. Place the cursor at the end of the line where you want the anchor
  2. Click the anchor icon in the WYSIWYG toolbar. Looks like a little flag.
  3. Use a unique id that would make sense if you saw it in a url

Make a link to the anchor

  1. Make a link as usual, but choose 'Link to anchor in text' for Link Type
  2. Choose an anchor from the list.