BLACK FRIDAY: 50% OFF all Pro plans
Pro from $18 a year or $60 lifetime, no code needed
Ends Cyber Monday, 30 Nov. Lock in the price today
Get 50% Off
Pro widget

Scroll to Top Widget for Elementor Pro

A fixed back to top button with a scroll progress ring.

Overview

What Scroll to Top does

Scroll to Top adds a button fixed to the bottom of the screen that appears after the visitor scrolls and brings them back to the top of the page. A ring around the button can show how far down the page the visitor is. Use it on long pages, blog posts and shop pages.

Live demo

See it in action

Features

What it can do

  • A ring around the button fills as the visitor scrolls down the page.

  • Appears after a set scroll distance, or stays visible all the time.

  • Three appear effects: Fade, Slide Up and Zoom.

  • Three positions: bottom right, bottom left and bottom center.

  • Custom icon and optional text next to the icon.

  • Can be hidden on phones or on desktop.

  • Scrolls smoothly, or jumps at once for visitors who prefer reduced motion.

  • Own name for screen readers, and it works with the keyboard.

Use cases

When to use it

Long articles

Give readers a quick way back to the menu, and show reading progress with the ring.

Shop and archive pages

Help shoppers return to the filters and search after scrolling through many products.

Site wide in the footer

Place it in a footer template so it shows on every page of the site.

Setup

How to set it up

A few steps from adding the widget to a finished result.

  1. Drag Scroll to Top anywhere onto the page, or into a footer template to use it on every page.

  2. Choose an Icon and, if wanted, type a short Text.

  3. Leave Scroll Progress Ring on to draw the ring around the button.

  4. Set Show After Scrolling (px) and pick an Appear Effect.

  5. Choose the Corner and fine tune it with Distance From the Side and Distance From the Bottom.

  6. Set size, colors and ring colors in the Style tab.

FAQ

Questions and answers

Why is the progress ring missing?

The ring is hidden when the Text field is filled in, and it is only drawn on a round button. Clear the text and keep the border radius round.

Can the button be visible from the start?

Yes. Set Show After Scrolling (px) to 0 and it shows all the time.

How do I add it to every page?

Place the widget in a template that loads on every page, such as the footer. The button is fixed to the screen wherever the widget sits.

Can it be hidden on phones?

Yes. Set Hide On to Phones. It can also be hidden on desktop instead.

Bright Addons Pro

Get Scroll to Top with Bright Addons Pro

Bright Addons Pro has 80 Pro widgets plus all 51 free widgets, 10 extensions, a Theme Builder and 32 dynamic tags. From $18 a year, with a 14-day money-back guarantee.