How To Use Anchor Scrolling

Using anchors in Avada is a great way to direct your user’s attention to important information at the click of a link. The intention is that when a user clicks the anchor link they will be scrolled smoothly to the information further up/down the page. If the action is not smooth, this means that the JavaScript code isn’t firing and the anchor isn’t set up correctly. Please continue reading below to learn how to set up anchors properly.

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.

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.

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.

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.

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.

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

OR

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

into the

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.