ID (ANCHOR)

There are situations when you may wish to give your Frame an ID. The most frequent use case is when you wish to anchor a button, an image, a link to your Destination Frame.

ANCHOR BUTTONS & IMAGES

  1. Give the Destination Frame an ID.
    • TIP: ensure your ID is in lowercase and also with no spaces (use hyphens rather than spaces). E.g. your-object.
  2. You may now create an anchor link in the following locations:
    • A Button. Use the 'Anchor List' drop down in the Button Component. 
    • An image (i.e. when you anchor one image to another). Use the 'Anchor List' dropdown in the image component.
  3. In both the Button and Image Components, notice that the 'Anchor List' dropdown will automatically display your Frame ID, after you’ve added it to the Frame ID (anchor) field.
    • Select the Frame ID from the dropdown list.
  4. Ensure that 'Scroll To' is on for Buttons, Images and Text Links
  5. Now when a visitor clicks on the Button or Image and the page will scroll to the Destination Frame your gave an ID in Step 1.

  D03 E02    03:16

Anchor Links in Buttons

Here, during the 5 Day Challenge, we see a demonstration of how Buttons can be used as Anchor Links to any frame on a page.

Be sure to add a # in your button link, and check the 'Scroll to' behaviour tab.

ANCHOR LINKS

  1. As above, also give your Frame an ID.
    • TIP: ensure your ID is in lowercase and also with no spaces (use hyphens rather than spaces). E.g. your-object.
  2. Use the Text Link to add your ID.
    • Notice there is no 'Anchor List', however in the URL field, use a # before adding your ID. E.g. #your-object.
  3. Select 'Scroll' from the 'Class' dropdown.
  4. Now when a visitor clicks on the Button or Image and the page will scroll to the Destination Frame your gave an ID in Step 1.