Easy Scroll to Top adds a back-to-top button to the frontend from a system plugin. The default look is a progress ring that fills as the visitor scrolls.

What you can do

• Show a circular progress ring, a plain button, a pill, or a square
• Add a reading bar at the top or bottom of the viewport
• Add a second button that scrolls to the bottom
• Hide the control on phone, tablet, or desktop
• Limit it by menu, homepage, URL, language, or component

Built for modern Joomla

• Joomla 4.4+, 5, and 6
• PHP 8.1 or later
• No module position and no jQuery

Before you install

• Joomla: 4.4 or later, 5.x, or 6.x
• PHP: 8.1 or newer
• Access: Super User to install and edit plugins

Not required

• jQuery
• A module position
• A template override

Step 1: Download

After purchase, download EasyScrollToTop_UNZIP.zip from your email or the Downloads section.

Step 2: Unzip on your computer

1. Extract EasyScrollToTop_UNZIP.zip.
2. Inside you should see:
   • pkg_easyscrolltop_*.zip (install this one)
   • ReadMe.txt

Step 3: Install in Joomla

1. System > Install > Extensions
2. Upload pkg_easyscrolltop_*.zip
3. System > Maintenance > Clear Cache

A fresh install enables the plugin. An update leaves the enabled state as you set it.

1. Open System > Manage > Plugins.
2. Search for Easy Scroll to Top and open it.
3. Leave Enable on the site set to Yes.
4. Choose a preset, or leave Custom and edit the fields yourself.
5. Check the preview, then Save.
6. Open a long frontend page, scroll past 300px, and click the button.

Presets fill the other fields. You can still change any field after that.

Presets

• Progress ring: circle, arrow, ring on
• Minimal arrow: circle, no ring
• Pill label: rounded pill with the word Top
• Square: small radius and a chevron
• Reading bar only: button off, bar at the top
• Ring and bar: progress ring plus the reading bar
• Top and bottom: progress ring plus a scroll-to-bottom button

Use the Button tab for look and motion.

• Shape: circle, rounded, square, or pill
• Size and icon size. Built-in icons are arrow, chevron, caret, angle, and circle
• Optional text label. If Show percent is on, the percent replaces the label
• Colors, hover colors, optional gradient, border, radius, shadow, and opacity
• Progress ring track, color, and thickness
• Optional dark mode colors when the device prefers a dark theme
• Entrance: none, fade, slide, or scale
• Tooltip and an optional accessible name. Empty uses Scroll to top

A custom SVG is sanitized. Script tags and remote links are removed. A media image replaces the icon when set.

If the icon and background are too close in contrast, the preview shows a warning. You can still save.

Reading bar

• Off, top, or bottom
• Height from 2px to 8px, color, track, and its own z-index
• Can stay on when the button is hidden
• Hidden on pages that do not scroll

Scroll to bottom

• Off by default
• Optional label, tooltip, and accessible name
• Stack above or beside the top button, with a gap
• Hides when the visitor is within the near-bottom distance (default 48px)
• Optional separate icon and background colors

Position

• Corner: bottom right, bottom left, top right, or top left
• Offset X, offset Y, and extra clearance for chat or cookie widgets
• Z-index, default 9990
• Safe area is on by default so the button clears notches
• RTL flips left and right unless you lock the side

Devices

• Phone is below 768px and tablet is below 1024px. Both breakpoints are editable
• Hide on phone, tablet, or desktop. A hidden device hides the button, the bar, and the bottom control
• Phone and tablet can use their own corner and size. Size 0 and offset 0 mean same as desktop. A set size under 44px is raised to 44px

• Show after: pixels (default 300) or a percent of the page
• Minimum scrollable pixels: hide everything when the page is shorter than this (default 80)
• When to show: always after the threshold, or only while scrolling up
• Motion: smooth or instant. Duration and easing apply to smooth. Reduced motion always jumps instantly
• Scroll target: optional CSS selector. An invalid selector falls back to the top
• Sticky header: a pixel offset, or a selector whose height is measured on click
• Scroll container: leave empty for the window. Set a selector only if the page scrolls inside another element
• Move focus to the top: off by default

• Menu items: all pages, only selected, or all except selected
• Homepage: optional hide
• URL include and exclude: one path per line. * is a wildcard and the pattern must match the whole path
• Languages: leave empty for every language, or pick content languages
• Hide on components: multi-select of enabled components. Empty means show everywhere

The plugin does not run in the administrator, in print, or on tmpl=component popups.

Advanced

• Hide another back to top: a CSS selector for a template button, for example .helix-scroll-top
• Extra CSS class and custom CSS are printed with the widget

• No button on the page

  • Confirm the plugin is enabled and Enable on the site is Yes.
  • Scroll past the Show after distance. Short pages stay hidden.
  • Check device hide, menu rules, URL rules, language, and Hide on components.
  • Clear Joomla cache and hard-refresh the browser.

• Two back-to-top buttons

  • Disable the template button, or set Hide another back to top to its CSS selector.

• The click stops under a sticky header

  • Set Sticky header offset, or a header selector, then save and test again.

• The preview looks empty

  • Hard-refresh the plugin screen so the preview stylesheet loads from your site URL.

• Nothing changes when I pick a preset

  • Hard-refresh the plugin edit page, then change the preset again. The preview and the other fields should update.

Need help? Open a ticket at support.joomlax.com.

Please include:

• Joomla, PHP, and Easy Scroll to Top versions
• Template name
• Whether the button is missing, duplicated, or scrolling to the wrong place
• The preset and any targeting you set (menu, URL, component)