This highly requested widget offers a simple but popular website feature: a back-to-top button. This smart button appears as you scroll, allowing users to return to the top of the page with the click of a button.
This widget uses industry standard positioning, ensuring that back-to-top functionality can be in place on your site within seconds.
Further customization allows for styling of the default button, along with several options for button triggering, scroll duration, and more.
Widget Compatibility: Highly Compatible (No known issues when combining with other MuseThemes widgets)
Current Version: 1.0
Supported Devices: Desktop, Tablet, Phone
Setup
Drag the widget from the library and drop into your project in Design mode. The widget itself can be placed anywhere. Feel free to keep it off-canvas to save space.
The widget is functional immediately, and the Back To Top button will now appear upon previewing or publishing.
Open the widget option panel.
Button Text: This field determines the text that will appear in the button. If you wish to have a simple icon with no text, leave this field blank.
When using a text-free button, make sure there are no empty spaces in the Button Text filed, in order to ensure proper button formatting
Trigger Position On Page: This setting determines the position on the page in which the button will appear. For example, if a setting of 100 is used, the button will appear when the user has scrolled 100 pixels down the page.
Button Alignment: Our widget offers 3 fixed positions: Left, Center and Right.
All 3 alignment options locate the button along the bottom of the page. The Left Offset, Right Offset, and Bottom Offset offer padding control for fine tuned placement.
Fade Transition Time: This is the time it takes for the fade transition to occur when the button appears and disappears.
Scroll To Top Speed: This setting determines the time it takes to scroll to the top of the page when the button is clicked.
BUTTON STYLING SECTION
This section provides all of the parameters needed to style the Back To Top button. These settings are labeled with their function, and will not be discussed individually.
Please note:
Button Width & Height are independent of the Button Text Size setting.
Using a lot of text in your button, or large Button Text Size settings will automatically extend the size of the button, without adjusting the Button Width or Height.
For a round button, use a large number in the Button Radius setting.
You may use any font you like for the button, but be sure that the font is also used elsewhere on the page so that it is loaded properly by the browser.
By default, the button border is not enabled. To add a border, increase the Button Border Width setting to 1 or greater.
To create a border button, set the Button Border Width to 1 or greater, as described above, and match the Button Text / Icon Color to the border color. If you wish to have a transparent inner button area, set the Button BG Opacity to 0 (zero).
For a text-only link, set the button text settings as you wish, and set the Button BG Opacity and Button Border Opacity settings to 0 (zero).