How To Use Anchor Scrolling
Last Update: March 14, 2023
Adding Anchor IDs To Sections
Before we can talk about Anchor Scrolling, you must first set up your Anchor IDs. Anchor IDs allow you to specifically target a section of a page by adding them to the start of those sections. There are 2 common ways of adding Anchor IDs depending on the section you’d like to target. To learn about these two methods and when to use each one, continue reading below.
‘Name Of Menu Anchor’ Option In Containers
The first method of adding Anchor IDs is to use the ‘Name Of Menu’ option located in Container elements. This option lets you add an Anchor ID into the Container itself. When using this method, the user will scroll to the beginning of the Container. If you just want to generally point your users to a section, then use this method.
Step 1 – Create a new page or post, or edit an existing one.
Step 2 – Add your content by adding Containers and selecting your desired column layouts, then adding the Elements into the columns. Keep going until you’ve added all your desired content.
Step 3 – Now determine which Containers you’d like to target. On your chosen Container, click the ‘Container Settings’ icon to bring up it’s options window.
Step 4 – Under the ‘General’ tab, locate the ‘Name of Menu Anchor’ option. In the text field, enter a unique Anchor ID. For example, aboutsection.
Step 5 – Once finished, click ‘Save’. Repeat steps 3-4 for all the different Containers you’d like to target.
Menu Anchor Element
The second method of adding Anchor IDs is to use the Menu Anchor element, this allows you to target a specific section. For example, if you’d like to target specific content, then you would place a Menu Anchor element directly above it. That way, the user scrolls directly to the content you’d like them to see rather than just the beginning of the section it’s part of.
Step 1 – Create a new page or post, or edit an existing one.
Step 2 – Add your content as normal then determine the content on the page you’d like to target.
Step 3 – Now we need to add the Menu Anchor element. To do this, add a ‘1/1’ Column directly above the content you’re targeting by clicking the ‘+ Columns’ button on the lower right side of the Container.
Step 4 – Once you’ve added the ‘1/1’ column, click the ‘+ Elements’ button to bring up the Elements window. Locate the ‘Menu Anchor’ element and click it to bring up it’s options window.
Step 5 – In the ‘Name’ field, enter a unique Anchor ID. For example, aboutme.
Step 6 – Once finished, click ‘Save’. Repeat steps 3-5 for all the different content you’d like to target.
Adding Anchor Links
Once you’re finished adding your Anchor IDs, it’s time to add your Anchor links. There are multiple ways to add Anchor Links into your content depending on where you’d like to place them. Continue reading below to learn more about each method, and when to use them.
When you use anchors on your menu items, it will always automatically scroll to the corresponding section. To learn how to create one page websites or how to use anchors on your menus correctly, please read our Setting Up One Page article. If you want to use anchor links as well as normal links on your site, please read our One Page Menu With Multi-Page Links article.
One Page Text Link Element
You can add anchor links using the One Page Text Link Element. This element is an Inline Element and can be inserted via the WordPress Content Editor. It can be used with any basic HTML elements like plain text and images. Continue reading below to learn how to add a One Page Text Link element.
Step 1 – Set up your Menu Anchors as instructed in the area ‘Adding Anchor IDs To Sections’ above.
Step 2 – Add any element that allows for regular text to be inserted via the WordPress Content Editor. For example, the Text Block element.
Step 3 – Click the ‘Settings’ icon on the Text Block element to bring up the Element Settings window.
Step 4 – Locate the WordPress content editor field. On the toolbar, you’ll find the Avada Builder Element Generator icon. Click the Element Generator to bring up the selection window.
Step 5 – Locate the ‘One Page Text Link’ element, then click it to bring up it’s options window.
Step 6 – In the ‘Name Of Anchor’ option, enter the anchor name of the section you’d like to link to with a hashtag ( # ). For example, if your anchor is aboutme, then you’ll need to enter #aboutme.
Step 7 – Once finished, click ‘Insert’. You can then add content into the Text Block element as normal. Once you’re done, click ‘Save’ to save your changes.
Adding Anchor Links As Classes
When you’re not using menu items or can’t use a One Page Text Link element, then you can try adding a custom class to the anchor itself. There are two classes you can add for different circumstances. These two classes are
Continue reading below to learn when to use each one.
You can add the
class to any link you add to Text Block elements, Checklist elements, Slider elements, etc. Basically, anytime you add a
tag, you can also add
tag. For example:
You can use the
class if you’re adding anchor links to elements that has a ‘Link’ option available. For example, elements such as Image Frames, Countdowns, Image Carousels, Content Boxes and etc. To set this up, insert the anchor link into the ‘Link URL’ option then the
class in the ‘Class’ option. To illustrate, refer to the image to the left.
Linking To A Section On Another Page
If you’re linking to a specific section of a page, from one page to another, you’ll need to use an Absolute Link rather than just a Relative Link. Continue reading below to learn how to correctly link to a section on another page.
Step 1 – Set up your Menu Anchors as instructed in the area ‘Adding Anchor IDs To Sections’ above. This is where your menu item will scroll to.
Step 2 – You’ll need to use an Absolute Link to navigate to a different page as well as the element’s ID that you want to navigate to. That will look like http://yoursite.com#aboutme
This will direct you to your homepage, then your browser will “look” for the #aboutme ID and scroll to that location.
Anchor Linking To A Specific Toggle Or FAQ Item
If you want to link to a specific toggle or FAQ item, this is now possible with Avada 7.2.1 and up.
Step 1 – Load page (for example, https://avada.website/financial-advisor)
Step 2 – Scroll to toggles and right click on specific toggle item, as seen in the screenshot below (eg.How do I Get Started)
Step 3 – Select copy link address to get URL (eg https://avada.website/financial-advisor#97a77b7a2579a33f8)
Step 4 – You can then use that link directly as part of a Button Element etc.
Underscore In The Anchor Link Address
Linking from one page to another while using anchor scrolling, will cause Avada to add an underscore character between the # character and the actual target ID (the anchor name). This can cause problems in some uses, but is required for triggering the theme’s smooth scrolling script.
There are instances where users may want the ability to remove the default underscore from the URL. (eg. when linking to a non-Avada area of your site; like a specific location in a PDF document OR off your site entirely.) When that is needed, you can add the class
to the element or link.
Methods You Can Use To Add This Class To Your Links
Note: If you do remove the underscore from the URL, it will disabling smooth scrolling for that link. So it shouldn’t be used unless you’re not intending on navigating with smooth scrolling.