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 Beaver Builder.
- Click the Advanced tab and scroll down to the CSS Selectors section.
- For the
IDsetting, add a unique value such as
IDvalues 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
IDwith 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
modules or columns, in which you set the anchor ID on the Advanced tab. If you
link to a target HTML element inside a Text Editor or HTML module, such as a
<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
<a href> link, you can set up smooth scrolling.
<a>anchor for the target HTML element. For example, you could create a target anchor called
<div>element in an HTML module, as follows:
<p>I want to link to this spot.</p>
Open the element where the link will be and add the class
<a href>link. For example:
<a href="#my-div" class="fl-scroll-link">Click Here</a>
Customize smooth scrolling settings