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
- Open the target element's settings in Page Builder.
- Click the Advanced tab and scroll down to the CSS Selectors section.
- 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
- Open the element where you will create the link.
- 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 or HTML 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:
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.
Smooth scroll to elements in text areas
<div> element, the link will jump up or down the page rather than smooth scroll. If you are also linking from a Text Editor or HTML link where you can modify the
<a href> link, you can set up smooth scrolling.
1. Create an
<a> anchor for the target HTML element. For example, you could create a target anchor called my-div for a
<div> element in an HTML module, as follows:
2. Open the element where the link will be and add the class fl-scroll-link to the
<a href> link. For example:
Customize smooth scrolling settings