How to Add Scroll to Top in WordPress Astra Theme

In this video I’ll show you how to add a scroll to top icon on your website using the WordPress Astra theme.

Timestamps:
Introduction: 0:00
Steps to Add Scroll to Top in WordPress Astra Theme: 0:42
Conclusion: 2:32

Support this channel by becoming a member:

Video Transcript:
Giving your WordPress site visitors a simple and clear option to get from the bottom of whatever page they’re on back to the top of that page can help ensure visitors stay engaged and stay on your site. The popular Astra Pro theme makes adding a scroll to top icon quick and easy, and gives you some control over how the icon looks and when it’s displayed. I want to clearly point out that this does require that you’re using the paid version of Astra Pro and not the free WordPress Astra theme.

Now let’s walk through the steps to add a scroll to top icon on your website using the WordPress Astra Pro theme.

Step 1. Navigate to your WordPress home screen, and then click “Appearance” in the menu on the left side of your screen. An expanded menu is shown.

Step 2. Click “Astra Options” in this menu. The Astra Options window is displayed on the right side of the screen.

Step 3. Scroll down to Available Astra Pro Modules, and click to activate Scroll to Top if it isn’t activated already.

Step 4. With the Scroll to Top feature activated, click “Customize” in the Appearance section on the left side of the screen. The WordPress Astra theme customization screen is displayed.

Step 5. Click “Global” in the menu on the left side of the screen. The Global menu is shown.

Step 6. Click “Scroll to Top.” The Scroll to Top options are displayed.

Step 7. Within the General section, you can choose to display the Scroll to Top icon on either desktop, mobile or both, and also whether you want to display it on either the left or right side of the screen. Additionally, at the bottom of this section you can adjust the icon size.

Step 8. Click “Design.” This is where you can adjust the border radius for the Scroll to Top icon, the icon color and the background color. As you make your changes you can scroll down on the right side of the screen and you’ll see a preview of your icon.

Step 9. When you’re done making changes click the “Publish” button at the top of the screen. Your changes will be saved and the Scroll to Top icon will be visible on your website immediately.