The Scroll to Top Widget allows visitors to go back to the top of your website with a single click. This improves web navigation while also giving your current site design a more professional appearance. You can also control the animation duration and can also customize the appearance using its styling options.
Let’s look at each of the options in the “Scroll to Top Widget” below.
Install Scroll to Top Widget for Elementor #
This widget requires Unlimited Elements Free version installed and activated on your WordPress website.
- Go to Unlimited Elements Widget Library
- Search in the search bar for “Scroll to Top”
- Hover over the widget in the search results and click install
- Add your “Scroll to Top” widget to any Elementor Page
General Settings #
Icon
Choose an icon to display.
Scroll To
Choose an action to associate with icon.
- Top- Page will scroll to the top.
- To Section- Page will scroll to a specific section.
Section ID/Class
Type any section id to scroll to that specific section.
Scroll Animation Duration
Set the scroll animation duration in milliseconds.
Show Text
Show/Hide the text.
Text
Type the text to display under icon.
Attention Grabber
Select one of the below attention grabber animation.
- None
- Blink
- Bounce
- Fade
- Shine
- Spin
- Pulse
- Grow
- Waggle
Positioning Settings #
Position
Set the position of scroll button.
- Inline
- Fixed
Alignment
Set the alignment of scroll button.
- Left
- Center
- Right
Icons Styling #
Style the button size, icon size, border radius, shadow, and border.
Button Styling #
You can style the button background color, icon color, hover background color, and hover icon color.
Typography Styling #
Style the typography, text color, text color hover, and text spacing.
Usage Examples #
Here are some live use cases for the Scroll to Top widget.
