How to add a "Scroll to top" button

In TeleportHQ, the quickest way to add a "Scroll to top" button is the ready-made Back To Top element. In Elements → Primitives → Site, click Back To Top. TeleportHQ puts a round arrow button in the bottom-right corner, inside your site's footer, so it shows on every page. On your published site, it appears once a visitor scrolls down and takes them smoothly back to the top. You can also build your own button with an ID, a Fixed position and a Scroll To link.

Add the ready-made Back To Top button#

The TeleportHQ Back To Top element works on websites and web apps.

1. Open any page of your site.
2. In the left sidebar, click Elements.
3. On the Primitives tab, find the Site group. You can also type top in the search box.
4. Click Back To Top.

TeleportHQ adds the button and selects it:

• If your site has a Footer component, the message reads "Back to top" added to your Footer, so it shows on every page.
• If it doesn't, the message reads "Back to top" added to this page. Give your site a Footer component to show it everywhere. The button then shows on that page only.
• If the button is already there, the message reads The "back to top" button is already there — it is now selected.

On your published site, the button stays hidden at the top of the page. It fades in once a visitor has scrolled down more than one screen, and a click scrolls smoothly back to the top. Visitors who asked their device for less motion jump to the top instead.

To change its color or size, open your Footer component (in Pages, Components & Tree View, under Components) and select Back To Top. It sits in a Floating Buttons column at the end of the footer. See How to edit a component and update every copy.

Build your own button#

Build your own TeleportHQ "Scroll to top" button when you want a different design, for example a text button that says Top.

1. Mark the top of the page#

1. Open the page, and in the left sidebar, click Pages, Components & Tree View.
2. In the layers tree, click the first element on the page, for example your navigation bar or hero section.
3. In the right panel, open the Attributes section.
4. In ID, type top and press Enter.

2. Add the button#

1. Click an empty part of the dark area around the page, so nothing is selected.
2. In the left sidebar, click Elements, find the Forms group and click Button (B). The button is added at the end of the page.
3. Double-click the button text and type ↑ or Top. Or delete the text and add an arrow icon from Assets Manager → Icons. See How to add and color icons.
4. Style it in the right panel. For a round button, set the width and height to 50px in Size, pick a color in Background, and set Radius to 50%. See How to add borders, rounded corners and shadows.

3. Keep the button in a corner#

1. With the button selected, in the right panel, open Position.
2. In the dropdown at the top of the section, choose Fixed.
3. In the offset boxes, set bottom to 24px and right to 24px.
4. In Z-index, type 100 so the button stays above other content.

4. Link the button to the top#

1. With the button selected, click the link icon in the small bar above it.
2. Open the Scroll To tab.
3. Under Current component ID list, click top.

Check that it worked#

Preview your site, scroll down at least one screen, and check that the button shows in the bottom-right corner. Click it: the page scrolls smoothly back to the top.

Troubleshooting#

The Back To Top button doesn't show on my site It appears only after a visitor scrolls down more than one screen. On a page short enough to fit on one screen, it never shows. If you added it to one page only (no Footer component), it shows on that page only.

My own button doesn't stay in the corner on the canvas That's expected in the editor. The TeleportHQ canvas shows your whole page at its full height, so a Fixed button sits in a corner of the whole page, not of your screen. In Preview and on your live site, it stays in the corner of the screen.

The Scroll To tab doesn't list "top" Check that you typed top in the ID field of the first element, on this same page. While you edit a component (such as your footer), the list only shows that component's own IDs, not the page's: use the Back To Top element for a button on every page.

The button is hidden behind other elements Raise Z-index in Position, for example to 999.

The button covers content on phones Switch the canvas to a phone screen size and make the button smaller or move it. Changes you make at a smaller screen size only apply to that size and smaller. See How to change styles for mobile only.

Good to know#

• The Site group also has Contact Button, a floating button visitors use to get in touch. It sits above Back To Top in the same corner.
• Switching Position away from Auto sets a button's margins aside. Use the offsets instead of margins.
• Smooth scrolling is built into published TeleportHQ sites, so no extra code is needed. See How to link to a section of the same page with smooth scrolling.