Back To Top Pro

The Back To Top Pro button is a small floating element that appears as users scroll down the page. It offers:

• A circular button shape

• A scroll progress indicator ring

• Fully customizable colors, positioning, and sizes for both desktop and mobile.

---

1. Circle Settings

These define the size of the circular button depending on the device.

• Desktop Circle Diameter: 52px This sets the width and height of the circle on desktop devices.

• Mobile Circle Diameter: 46px Slightly smaller version optimized for thumb use on mobile screens.

• Progress Ring Thickness: 4px Sets how thick the progress ring appears around the button.

The progress ring visually shows how far the user has scrolled down the page.

---

2. Circle Colors

Customize the background (fill) of the button.

• Default Circle Fill: #FFFFFF The normal background color of the circle.

• Hover Circle Fill: #F5F5F5 Background color when the user hovers over the button with a cursor (desktop only).

---

3. Progress Colors

Control the two states of the progress indicator ring.

• Inactive Progress Color: #F7F7F7 The part of the ring that hasn’t filled in yet.

• Active Progress Color: #2E2E2E The filled portion of the ring, showing how much the user has scrolled.

This turns the button into more than just a shortcut — it becomes a subtle progress tracker.

---

4. Arrow Icon Colors

Controls the arrow inside the button.

• Default Arrow Hue: #212121 Standard arrow color for visibility and contrast.

• Hover Arrow Hue: #212121 Can be the same or a slightly lighter/darker color for hover interaction feedback.

---

5. Position Settings

This is where you control where the button appears on the screen.

• Horizontal Alignment: Left, Center, or Right Choose the horizontal side of the screen where the button should sit.

• Desktop Side Offset: 44px The distance from the chosen side edge on desktop.

• Mobile Side Offset: 17px A smaller offset for mobile to ensure it doesn’t block UI elements.

• Desktop Bottom Offset: 120px Controls how far up the button floats from the bottom edge on desktop.

• Mobile Bottom Offset: 100px Same as above but optimized for mobile spacing and thumb reach.

---

6. Mobile Visibility

• Disable on Mobile: If checked, the button will not appear on mobile devices.

Sometimes you might hide it on mobile if you’re using a sticky footer nav bar or if scroll-up behavior isn’t critical.

---

Summary

The Back To Top Pro button enhances user navigation — especially on long product pages or blogs — while giving you full control over its design, colors, and interaction styles.

Best Practices:

• Keep the circle visually light but well-contrasted.

• Use the progress ring to give subtle feedback without overwhelming the UI.

• Position it away from other floating elements like chat buttons or sticky cart bars.