Smooth scrolling links

You can add an ID to a target row, column, or module so that links from other locations will go directly to that spot on a page. When the link and target are on the same page, the page will smoothly scroll up or down to the target when the link is clicked. Besides looking great, this is a helpful navigation aid to users – it’s a visual cue that they are not leaving the page when they go to the link.

In these instructions, we’ll use the term element to refer to a row, column or module, and we’ll call the destination that you want to link to the target element.

Add a unique ID to the target element

  1. Open the target element’s settings in Page Builder.
  2. Click the Advanced tab and scroll down to the CSS Selectors section.
  3. For the ID setting, add a unique value such as my-unique-id. ID values must only contain alphanumeric characters, hyphens, or underscores.

Add the unique ID to the link element

  1. Open the element where you will create the link.
  2. If the link and target are on the same page, enter your unique ID with a pound sign (#) as the prefix. Following our example, your link will be #my-unique-id, as shown in the screenshot below.

If the link is created within the Text Editor module rather than an element with a Link field, set up the link the same way, with #my-unique-id, as shown in this screenshot.

If the link is to a target on another page, the link should be the full URL, followed by the unique ID with a pound sign, for example: http://example.com/#my-unique-id

That’s it! When your link is clicked, it will go to directly to the target element, with a smooth scrolling effect if both are on the same page.