The Scroll to Top module adds a floating button that takes visitors back to the top of long pages with a smooth scroll.
Switch it on: Essentials → Modules → Scroll to Top.
Configure it: Essentials → Scroll Top.
General Settings
| Setting | What it does | Default |
|---|---|---|
| Display Position | Bottom Left or Bottom Right corner of the screen. | Bottom Right |
| Bottom Offset | Distance from the bottom of the screen, in pixels (0–300). | 20 |
| Side Offset | Distance from the left or right edge, in pixels (0–300). | 20 |
| Show After | The button appears once visitors have scrolled this many pixels (0–10,000). Use 0 to show it as soon as visitors start scrolling. | 300 |
| Mobile | Hide the button on screens narrower than 600px. | Off |
Style
| Setting | What it does | Default |
|---|---|---|
| Icon | Chevron, Arrow, Double chevron or Caret. | Chevron |
| Shape | Circle, Rounded square or Square. | Circle |
| Size | Button width and height, in pixels (30–80). | 40 |
| Icon Color | Color of the icon. | #ffffff |
| Background Color | Button background. | #000000 |
| Hover Background Color | Button background on hover and keyboard focus. | #333333 |
Colors use a color picker and are validated as hex colors. An invalid value falls back to the default instead of saving an empty color.
Accessibility
- The button is a real
<button>element, so it can be reached with the Tab key and pressed with Enter or Space. - It carries a screen-reader label ("Scroll to top"), and the icon is hidden from assistive technology.
- If a visitor has turned on reduce motion in their operating system, the page jumps to the top instead of animating.
Working with other floating elements
- With Click to Chat (Pro) in the same corner, the chat button automatically sits above the Scroll to Top button and follows its size and offset. If Scroll to Top is hidden on mobile, the chat button moves back down on mobile.
- A bottom Announcement Bar (Pro) pushes the button up so it’s never covered.
Customizing the markup
Developers can change the button’s HTML with the esse_module_esse_scroll_top_output filter. See the Developer Reference.
Troubleshooting
The button doesn’t appear. Scroll further down. It stays hidden until you pass the Show After distance, and on a short page you may never reach it. Set Show After to 0 to test: the button then appears as soon as you scroll. Also check that Mobile isn’t hiding it on a narrow browser window, and that the module is switched on.
It sits behind something. Another plugin or your theme may use a higher z-index in the same corner. Switch the Display Position, or raise the Bottom Offset.