All Collections
Pages Builder
Linking to another part of the same page (anchor links)
Linking to another part of the same page (anchor links)
James Riley avatar
Written by James Riley
Updated over a week ago

If you have a long page, you may want to be able to link from what part of the page to another. Let's take a page from SNPT, built with SupaDupa, which has the following set of images at the top of the page:

This is created using a Grid Block, and then an Image block within the four cells of the grid. Say we then have a section on the page for each of the above categories, and we want it so that when the image is clicked, the page automatically moves to the corresponding section. Achieving this requires two parts:

  1. The Image (or text) needs to link to a word beginning with a hash:
    e.g #visual-shopping

  2. An element needs to exist on the page which has an ID matching this word, alebit without the hash e.g id="visual-shopping"

The first part is easy, you'll want to give your link the literal URL as: #visual-shopping or, in the case of an Image or Slide, specify it as the link:

For step two we want to give an ID to the text that we want to be scrolled to when the link or image is clicked. For this, place your cursor at the top left text of your block and click to edit the code for the text block as shown below:

From here, add the ID attribute to the first paragraph, and save your changes πŸ‘

Did this answer your question?