How to link to a section of the same page with smooth scrolling

In TeleportHQ, a Scroll To link jumps to a section of the same page, for example a menu item Prices that scrolls down to your price list. First give the target section an ID in the Attributes section of the right panel. Then select the link or button, click the link icon and pick that ID on the Scroll To tab. Published TeleportHQ sites scroll smoothly to the section by default, so you don't need extra code.

1. Give the target section an ID#

1. On the canvas, select the section visitors should land on, for example your price list container.
2. In the right panel, open the Attributes section.
3. In ID (it shows "e.g. testimonials" while empty), type a short name with no spaces, for example prices.
4. Press Enter.

Each ID must be unique on the page. Use lowercase letters and hyphens, for example opening-hours. Sections built by the TeleportHQ AI often have an ID already, for example our-story: select the section and look at ID.

2. Link to the section#

1. On the canvas, select the element that should start the scroll, for example the Prices menu item or a See prices button.
2. In the small bar above the selected element, click the link icon.
3. Open the Scroll To tab.
4. Under Current component ID list, click prices.

The link icon now shows the target. The Current component ID list shows the IDs on this page, and in the components used on it.

Link to a component without adding an ID#

The Scroll To tab also lists the components on the page, such as your navigation or footer, under Used components in this page. Click one, and TeleportHQ adds the ID it needs to that component for you.

Sections you add from the Sections tab are ordinary elements, not components, so they aren't in that list. Give them an ID as in step 1.

Check that it worked#

Links don't work on the editing canvas. Preview your site, then click the link. The page scrolls smoothly down to the section.

Troubleshooting#

The Scroll To tab has no IDs to pick No element on the page has an ID yet. Add one as in step 1. The tab also reminds you: "You can set/edit an ID for each element at the HTML Attributes section from the inspector."

The link jumps to the section but hides its top under my header A header set to Fixed or Sticky covers the top of the section. Add top padding to the target section, equal to your header's height. See How to add space around and inside elements.

The link in my navigation doesn't scroll on other pages A Scroll To link finds the ID on the page where the link is clicked. For a navigation component used on several pages, make sure the target ID exists on each page, or use a Page link to go to another page. See How to add links and buttons.

Good to know#

• Smooth scrolling is built in: every published and downloaded TeleportHQ site includes scroll-behavior: smooth in its base styles, so you don't need to add any custom code for it.
• Back to the top: to jump back to the start of the page, see How to add a "Scroll to top" button.
• Navigation menus: see How to create a navigation bar with a mobile menu.