In this guide, we will show you how to add a free “Scroll to Top widget” to your Elementor website. The Scroll to Top widget allows users to quickly return to the top of the page with a single click, improving navigation and enhancing the overall user experience on long pages. Perfect for creating a smooth, professional feel, this free widget makes your website easier to explore and more user-friendly. With customizable options for appearance, position, and behavior, the Scroll to Top widget helps you maintain a consistent, polished design across your Elementor site.
Let’s explore the customization options available in the free “Scroll to Top widget” for Elementor below.
Add a Free Scroll To Top to Elementor
Add a Free Scroll To Top Widget to an Elementor Page
Elementor Scroll To Top Widget General Settings
Icon
Let you choose the icon shown on the “Scroll To Top” button, typically an upward-pointing arrow.
Scroll To
Define where the page should scroll when the button is clicked. Options include:
Top: Scrolls the page to the very top.
To Section: Scrolls to a specific section.
Show button after scrolling (px)
Sets how far (in pixels) the user must scroll before the button appears, so it doesn’t show immediately on page load.
Scroll Animation Duration (ms)
Controls how fast the page scrolls to the top when clicked, measured in milliseconds.
Position
Define how the “Scroll to Top” button is positioned on the screen. Options include:
Fixed: The button stays in a fixed position relative to the viewport while scrolling.
Inline: The button appears within the normal document flow.
Snap Vertical
Set the vertical anchor point for the button when positioned as fixed. Options include:
Top: Aligns the button to the top of the viewport.
Middle: Vertically centers the button in the viewport.
Bottom: Aligns the button to the bottom of the viewport.
Vertical Distance
Distance (px) from the chosen vertical edge.
Snap Horizontal
Set the horizontal anchor point for the button when positioned as fixed. Options include:
Left: Aligns the button to the left of the viewport.
Right: Aligns the button to the right of the viewport.
Horizontal Distance
Distance (px) from the chosen horizontal edge.
Elementor Scroll To Top Widget Style Settings
Button Size
Controls the overall size (width and height) of the button container.
Icon Size
Adjusts the size of the icon inside the button independently.
Border Radius
Sets the roundness of the button’s corners, from sharp edges to fully circular.
Shadow
Adds a static shadow effect to the button, with options for color, blur, spread, and position.
Shadow on Hover
Defines a different shadow effect that appears when hovering over the button.
Border Type
Select the style of the button’s border. Options include:
Default
None
Solid
Double
Dotted
Dashed
Groove
Scroll To Top Widget Design Examples For Elementor
Here are some live use cases for the Scroll To Top widget.
Unlimited Timeline with Scroll To Top widget.
Counter with Animated Social Icons with Labels widget.
Thank you for using the Scroll to Top widget for Elementor! This free widget lets users quickly return to the top of any page, improving navigation and giving your site a polished look. With fully customizable appearance, position, and behavior settings, it easily adapts to your design. For help or inspiration, feel free to check out our website.