Scrolling to content

Overview

Act3 has a smooth-scrolling effect built-in, so any in-page link that points to an anchor (the ID of an element) will smoothly scroll to that anchor. There are a few methods to add IDs to elements in Act3 and HubSpot, and it's important to distinguish between the link and the ID of the element. The ID of the element should not contain the hash # symbol, while the link does (except for the Scroll to module, where the hash # symbol is automatically included).

Example of an ID: our-team

Example of a link that scrolls to the respective element: #our-team

Here are some very quick videos that show how to link and smoothly scroll to elements on the page:

Scrolling to a section

With this method you can scroll at the very top of your section, no matter the top padding added to the section. Use a Section extra settings module where you can add a custom ID.

Scrolling to an element

Here is how you can scroll to an element on the page using a Rich text module and HubSpot's anchor tool. As you can see in the video, there is an empty paragraph that adds some empty space right after the anchor. As shown in the video, you can remove that code from the source code pane. Just look for something like <p>&nbsp;</p> and remove it. Please keep in mind that after removing this it will be difficult to find this module in the preview section of the page editor, so you'll have to find it in the Contents sidebar on the left.

Scrolling to a module

Most of Act3's modules include a field (Wrapper › Identifiers) where you can add a custom ID to the respective module. You can use it to scroll to your module.

Scrolling to the top

Act3 contains a built-in #top anchor, so you can use it to scroll to the top of the page. You don't need to add an ID or anything else for this to work.