Back to Top
PRO
Component
Back to Top Pro is the most customizable scroll button for Elements. Control every detail: icon, typography, colors, borders, shadows, hover effects, blend modes and animations, all from a clean visual interface, no code needed. Perfect for any design and any brand.
Options:
✓ Preview
Enable — toggles the button visibility in the Elements preview; must be disabled before publishing.
✓ Icon Style
Enable — shows or hides the SVG icon
Color — icon color from theme palette
Icon — 4 arrow style variants
Thickness — stroke weight from 1 to 3.5
Size X — icon width
Size Y — icon height
Alt-Text — accessible label (visible only when text is enabled)
✓ Text Style
Enable - shows or hides the label above the icon
Text - editable label content
Visibility — breakpoint control to hide text on small screens (always, ≥640px, ≥768px, ≥1024px, ≥1280px)
Text color - from theme palette
Font - theme font family
Text Style - size preset (default sm)
Weight - from Light to ExtraBold
Letter Spacing - from Tighter to Widest
Icon distance - negative bottom margin to control gap between text and icon (None to XS).
Text symbols instead the icons: ▲ △↑ ⇧ ⇪⇡⥣ ⤒
✓ Background
BG color + opacity
BG hover color + opacity
✓ Layout
Padding — from 0 to 3
Position X — right, center, left
Bottom — vertical offset from bottom
✓ Border
Border color + opacity
Border hover color + opacity
Border width
Border radius
✓ Effects
Transition All / Colors / Transform
Multiple Shadow
Hover Effect — Sscale down or directional translate (↑↓←→)
Blend Mode — CSS blend modes
Backdrop Blur — none to 10px
✓ Animation
Direction — slide up, left, or right
Speed In — 150ms to 700ms
Speed Out — 150ms to 300ms
Trigger Point — scroll offset to show the button (50px to 1000px)
✓ Component Info Usage notes and credits