Using a link to scroll to a page location
The below video may offer additional information that is not contained in the text narrative.
On long web pages it can be very helpful to the visitor if there are links that will take them directly to the information they are looking for. The links that cause scrolling to a specific location on a web page are typically called scroll links.
This can be done via clicking on a button, image, menu item, or similar. When clicked, the page appears to scroll to a specific location on the web page such as testimonials, product specifications, etc.
What is a Scroll Link?
It's sometimes nice to have a long webpage with all your require content on it... think of a long sales page that has sections for benefits, customer testimonials, product features, etc.
Or a product training page that has multiple areas of content such as when the product should be used, specifications of the product, example usages, etc.
You want to put all that information on a single page, yet still give the visitor an easy way to find the information without endless scrolling up and down the page.
That's where a scroll link can come in very handy.
How do I place a scroll link on a page?
- Go to the destination location of the scroll link.
- Pick some module to act as the destination: I will often use the row settings, but you can use other modules also such as a heading. Using a heading module can be nice because then wherever you move the module, the destination identifier will go with it.
- Open the settings and go to the advanced tab.
- Scroll to the ID field.
- Enter some unique name in the ID field, such as prod-features.
- Save... of course.
- Now go to the action trigger component. This could be a button on a page, could be a menu item, could be an image, etc.
- Bring up the settings of the trigger component and for the link url put in #ID. In this example we would put in #prod-features.
That's it. Now when someone takes action on your trigger component, for example a button, the web page will scroll to the destination location defined by the ID field.
Some Common Issues
This video shows a couple of common issues when trying to set up a link to scroll to a page location.
Things to Remember
- CSS ID (and classes) must not contain any spaces. Use dashes (-) or underscores (_) as separators. Preferred is the dash (-).
- CSS ID can be uppercase, but common practice is to make the CSS ID all lower case.
- Try to put the target ID on the parent element or container (e.g. the row that contains what you want to target.
- When entering the ID into a Beaver Builder module, do not use the hash/pound (#) sign.
- When entering the destination link to be clicked, use the hash (#) sign followed by the id (e.g. #example-target-id)
- Anything that can be clicked with a link assignment field can be used. This includes menu items, images, headings, buttons, etc.
Examples Using Page Scroll Anchors
Sometimes examples can be very helpful when trying to get the look and behavior that you want on your site. It's really impractical for me to try and provide examples for every situation, but here are some more popular methods.
First, I have given the heading above this paragraph - Examples Using Page Scroll Anchors - an ID of "scroll-examples". So in all of the examples provided below I'll link that to the target scroll location. Clicking on each example should scroll the page back to the heading.