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 #
Choose an icon to display.
Choose an action to associate with icon.
- Top- Page will scroll to the top.
- To Section- Page will scroll to a specific section.
Type any section id to scroll to that specific section.
Set the scroll animation duration in milliseconds.
Show/Hide the text.
Type the text to display under icon.
Select one of the below attention grabber animation.
Positioning Settings #
Set the position of scroll button.
Set the alignment of scroll button.
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.