Theme Documentation

Back to Top

A fixed button to return user to the top of the page.

NoteThis is a built-in module, meaning you’ll need to open the Contents tab of the page editor sidebar to select it.

Content

  • Show/Hide button
  • Change text of button

Styles

  • Change text color of button
  • Change background color of button

back-to-top


Overview

The Back to Top module provides an essential user experience enhancement for longer pages on your HubSpot site. When activated, this module displays a fixed-position button that remains visible as visitors scroll down the page, allowing them to instantly return to the top with a single click. This feature is particularly valuable for content-heavy pages like blog posts, resource centers, and landing pages with multiple sections.

You’ll find the Back to Top module most effective on pages that extend beyond the fold, where users need to scroll significantly to consume all content. Consider implementing it on your blog template, detailed product pages, or comprehensive service pages where visitors might lose their place or want quick navigation back to your main menu.

Placement and Configuration

Since this is a built-in module, you won’t see it in your theme’s drag-and-drop module library. Instead, access it through the Contents tab in your page editor sidebar, where you can toggle its visibility and customize its appearance. The module automatically positions itself in the bottom-right corner of the viewport, ensuring it doesn’t interfere with your page content while remaining easily accessible.

Design Integration

The customizable text and background colors allow you to align the button with your brand guidelines. Consider using your site’s accent color for the background to maintain visual consistency, while ensuring sufficient contrast for accessibility. The button text can be customized beyond the default “Back to Top” to match your brand voice—options like “Top,” “Return,” or even an arrow symbol work well.

This module works seamlessly across all device types and automatically adjusts its positioning for mobile viewports.