Anchoring on a page

#1

When editing a large page, i need to apply bookmarks at the top of the page to the relevant sections. This may be really obvious , but linking and anchoring thus far has not worked

(Nick Papadatos) #2

Can you provide us with examples of what’s not working? Yes, applying anchors on a page is relatively straight forward.
N

#3

Hi ,

the bookmarks are at the top of the page and the content for the bookmark is within that container. Without creating content containers for each of the bookmarks, I have tried to anchor but of course that is looking for asset ID for me to do so. Is there anyway around this , or do I need to create 4 containers on the page for the bookmarks.

(Nick Papadatos) #4

I’m not sure whether I’m being over simplistic here but are you not doing the following?

First, create a bookmark with the id attribute - anchor point:

<h2 id="tips">Useful Tips Section</h2>

Then, add a link to the bookmark/anchor point (“Useful Tips Section”), from within the same page - these would be at the top of your page.

<a href="#tips">Visit the Useful Tips Section</a>

Hope this has helped
N

(Bart Banda) #5

Are you using the Edit+ WYSIWYG editor? If so, you should be able to create anchor points and links using that quite easily. More info here:
https://matrix.squiz.net/manuals/edit-plus/chapters/edit-plus-editor#adding-anchor-id
https://matrix.squiz.net/manuals/edit-plus/chapters/edit-plus-editor#adding-link

(Rachael) #6

The user manual fails to explain how to link to the anchor ID in the the WYSIWYG editor.

I managed to do it like this:

  1. Highlight the text you want to anchor to (eg. Introduction).
  2. Click the Anchor icon.
  3. Give the anchor a name (eg. Intro)
  4. Click Insert Anchor.
  5. Now go up to your list of contents at the top of your page, which contains the word you want to link down to your anchor.
  6. Highlight the text you want to link in your contents list, and click the chain-link icon
  7. Now here’s the key. In the URL Field, type # then the name of your anchor - eg. #Intro . In html, the # indicates an anchor, and the WISYWIG doesn’t insert this for you.
  8. Click Insert link.

Save and preview. Your anchor link should be working… :wink: