Total includes an advanced function for creating local scrolling links.
By using the local scroll functions in the theme it crease a “smooth” scroll affect to the target element it also will allow you to link directly to a section when the site loads if you wanted via your-site.com/#local-ection
How to Create a Local Scroll Section
The first step before creating a local scrolling link is to of course create a section that you are going to link to. You can do this by adding a new row via the WPBakery and adding a unique “Local Scroll ID” or the “Unique ID” field.
Why Does The Theme Use a Custom Local Scroll ID Field?
The reason the theme has it’s own Local Scroll ID field is so that you can link to a local section from another site/page and it will smooth scroll to it. If you use the native element ID the browser will want to quickly jump to the section linked to on page load.
Important: If you are NOT using a sticky top bar, header or menu or you don’t care to link to sections externally you could just use the element ID field instead of the custom Local Scroll ID field. This would be more efficient and recommended.
Local Scroll Any Link?
If you want to create a local scrolling link on any page simply add the classname “local-scroll-link” to any link and it will scroll there with a smooth animation.
Example:
WPBakery Elements
Some Total WPBakery elements have this ability built-in, such as the Total Button:
For any other module you could add the classname “local-scroll-link” to the “Extra class name” field.
Local Scroll Settings
Total also has some useful options in the Customizer under General Theme Options > Local Scroll Links so you can various settings.
