What is Sticky Back to Top?
The Sticky Back to Top element is a floating button designed to improve the navigation experience on your website. When visitors scroll down to the bottom of the page, this button allows them to instantly return to the top with a single click.
This element is useful for long pages with extensive content, helping reduce user effort and improving overall engagement.
How to Add the Sticky Back to Top Element?
Adding the Sticky Back to Top element to your page is simple and straightforward. Follow these steps:
Step 1: Open the GemPages editor and locate the Sticky Back to Top element in the elements panel.
Step 2: Drag the Sticky Back to Top element and drop it into the desired position on your page.
Sticky Back to Top Settings
1. Icon
On/Off: Toggle the icon visibility. Turn it off to use text only.
If On:
- Choose Icon: Select an icon from the library that matches your site’s theme.
- Position: Decide whether the button appears on the left or right side of the screen.
- Spacing: Adjust the distance between the button and the screen edges for precise placement.
2. Insert Link
You can add a custom link to the button if you want it to perform additional actions besides scrolling to the top.
3. Size
- Width & Height: Define the dimensions of the button to ensure it’s noticeable yet not obtrusive.
- Padding: Adjust the internal spacing within the button for better alignment of text or icons.
4. States: Normal/Hover
Customize the appearance of the button in both normal and hover states.
- Background Color: Choose distinct colors for each state to improve visual feedback.
- Text Color: Set a readable text color that complements the background.
- Border: Define border width, style, and color to outline the button.
- Corner: Adjust the roundness of the button’s corners for a modern or classic look.
- Shadow: Add a shadow effect to create depth and make the button stand out.
5. Text
If you include text in the button, you can style it to suit your branding:
- Styles: Select from heading styles for prominence.
- Font: Choose a font family that matches your store’s typography.
- Size: Adjust the text size for visibility.
- Bold/Italic/Underline: Add emphasis to these text styles.
- Font Weight: Control the thickness of the text.
- Line Height: Fine-tune the spacing between lines for multiline text.
- Letter Spacing: Adjust the space between individual characters for readability.
- Transform: Format text to uppercase, lowercase, or capitalize each word.
6. Align
Choose how the button is aligned:
- Left: Align the button to the left edge.
- Center: Center the button within the button.
- Right: Align the button to the right edge.
