Page Anchors

What are Page Anchors?

Page Anchors are bookmarks within a page that when used as part of a link to a page (or even the same page) will cause the view of the page to be positioned at that anchor rather than the top of the page.

These make the visitors experience much better as rather than being redirected to a page and then having to scroll down the page looking for that information, they will immediately have the location on the page in their view.

How to Insert Page Anchors

All you need to know about a Page Anchor, is that it is any HTML page element that has a unique name (within the page).

The editor includes a button that will insert the correct code into a page for you, see Page Editor  "Insert Page Anchor".  All you have to do is supply the anchor name.

  The name itself must conform to these rules:

  • Must contain at least one character
  • Must not contain any space characters
  • In HTML, all values are case-insensitive, please use lower case only to avoid confusion
  • Don't start the name with a numeral, to avoid problems with older HTML specifications

If you want anchor names that are meaningful, consisting of more than one word, the recommendation is to joining the words using the underscore character, like "jump_to_this_place". The insert button checks that your name meets these requirements and will reject it if it does not.

The editor includes a button that will insert the correct code into a page for you, see Page Editor,  "Insert Page Anchor".  All you have to do is supply the name for the anchor.
The system will then insert the correct code for you.

You will see on the page an entry looking like this:

{{ layout:anchor anchor="useful_classes" a="?? ANCHOR ??" }}

The anchor="" part contains the name of the anchor, the a="?? ANCHOR ??" part is just to make the anchor entry more visible in the page editor view.

How to Use Page Anchors

You can insert a link to a Page Anchor on any page, including the one with the anchor.  If it is on the same page, the browser page view will simply scroll to the anchor location.

The editor includes a button that will insert a link, see Page Editor  "Insert link".Here you see a link to another page in this domain called "useful-classes", and the Page Anchor on that page called "table_class".  The #value at the end of a link location specifies the Page Anchor name.

If you wanted to link to a Page Anchor on the same page you would simply provide the #value in the URL field.