Anchor Scrolling

03/13/2017

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.

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.


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 a Content Based 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 Element Generator icon which looks like the Fusion Builder logo. 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 fusion-one-page-text-link or fusion-menu. Continue reading below to learn when to use each one.

fusion-one-page-text-link class

You can add the fusion-one-page-text-link class to any link you add to Text Block elements, Checklist elements, Slider elements, etc. Basically, anytime you add a <a href></a> tag, you can also add class="fusion-one-page-text-link" into the <a href></a> tag. For example:


fusion-menu class

You can use the fusion-menu 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 fusion-menu 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.


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 avada-noscroll to the element or link.

Methods You Can Use To Add This Class To Your Links

  • When adding to an element, you can add the class to the Custom CSS area.
  • When adding the link as a direct text link in the default editor, you can add it through a class attribute.
  • If you’re adding your link through a Custom Link WordPress menu item, you can add it to the Custom Class field for the menu item.

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.

14 Likes
Proudly Serving Over 400000 Satisfied Users!