Divi Plus Back to Top tool for replaces the default browser scroll jump with a styled SVG chevron button that smoothly scrolls users back to the top header.

How to enable back to top tool

To enable the Back to Top button on your site, use the following steps:

1. Navigate to your WordPress Admin Dashboard.
2. Go to Settings > Divi Plus Options.
3. Select the Tools tab and choose the Back to Top panel.
4. Toggle the Enable Back to Top switch to ON and customize styling settings.

Tool settings

Scroll threshold and speed

Define the scroll distance threshold (in pixels) the user must pass before the button shows up. You can also customize the scroll animation runtime duration (in milliseconds).

Button positioning

Select the floating button alignment position. Choose between Bottom-Left, Bottom-Center, or Bottom-Right viewport alignments.

Text labels

Optionally add a short text tag (like “To Top”) that displays alongside the scroll icon, which is helpful on text-heavy pages.

Design and styling options

• Button styling: Set independent background colors, text/icon colors, border widths, colors, and border-radius settings for normal and hover states.
• Entrance transitions: Choose from 6 entrance effects: Fade, Slide Up, Slide Down, Slide Left, Slide Right, or Zoom.
• Mobile toggle: Choose whether to display or hide the button specifically on mobile and tablet devices.

Frequently Asked Questions

Does this replace Divi’s default scroll button?

Yes. When active, it automatically disables and replaces the default Divi scroll button, giving you more granular layout and animation controls.

What is the recommended scroll threshold?

A scroll threshold of 300px to 400px is standard. This ensures the button only displays after the visitor has scrolled past the primary header sections.

Can I customize the button scroll speed?

Yes. The scroll duration (in milliseconds) determines the animation speed. For instance, setting it to 500ms creates a fast transition, while 1000ms creates a slower, gentler scroll.