How To Add a Sticky Scroll Back To Top Button – Elementor

Welcome to WebSensePro! In today’s how-to guide, we’ll show you how to add a scroll-to-top button to your WordPress Elementor website. While many plugins can help you achieve this, we recommend using a small piece of code to avoid slowing down your website and reducing the risk of malware.

Step 1: Create a Dummy Page

First, create a dummy page in Elementor to visualize the scroll-to-top button placement. This page will help you design and test the button before implementing it on your live site.

Step 2: Add an Icon Widget

1. Navigate to the Elementor editor.
2. From the left panel, choose the “Icon” widget and drag it to the page.
3. Select an arrow icon (an up arrow works best for a scroll to top button).

Step 3: Position the Icon

1. Go to the “Advanced” tab in the icon settings.
2. Change the position to “Fixed”.
3. Adjust the horizontal orientation to the right and the vertical orientation to the bottom. This places the icon at the bottom-right corner of the page.

Step 4: Set the Offset

1. Still in the “Advanced” tab, change the offset values.
2. Set the horizontal offset to 1% VH (Viewport Height).
3. Set the vertical offset to 1% VH as well. This ensures the icon is slightly away from the edges, providing a clean look.

Step 5: Customize the Icon

1. Change the icon color to white or another color that contrasts well with your page background.
2. Preview the page to ensure the icon is visible and positioned correctly. It should remain fixed as you scroll through the page.

Step 6: Add Scroll Functionality

1. Go back to the Elementor editor and select the header section (or the topmost section you want to scroll to).
2. In the “Advanced” tab, locate the CSS ID field and enter a unique ID, such as scroll-up.

Step 7: Link the Icon to the Top

1. Select the icon again and go to the “Content” tab.
2. In the link field, enter #scroll-up. This link directs the button to scroll to the section with the scroll-up ID.

Step 8: Test the Button

1. Click the “Update” button to save your changes.
2. Preview the page and scroll down.
3. Click the scroll to top button to ensure it smoothly scrolls back to the top of the page.

Conclusion
You now have a functional and stylish scroll-to-top button on your WordPress Elementor website! This simple addition enhances user experience by providing a quick way to return to the top of the page.