Last updated on May 8th, 2021 at 12:03 am


You can make a scroll to top button for Astra without the Pro version with just a couple code snips in the Customizer.

Creative Word Cloud

This post contains affiliate links. We may earn a commission if you purchase an item through our links. It costs you nothing and helps us to fund this blog. Please see our Affiliate Disclosure & Notification for details.

Astra is one of the most popular WordPress themes on the market. Their free version has a ton of features you regularly find in paid themes. Their pro version takes it to an entirely different level though with custom layout hooks and all kinds of useful features.

One of those features is a simple scroll to top button that places a floating button in the browser window that a user can click or tap to send them back to the top of the current page. It’s only available on the pro version of Astra, but in this post I’ll show you how to get the same functionality in the free version.

We’re going to accomplish this with 2 separate actions.

1. Create an HTML Button in the Footer

Astra has an excellent footer builder right in the theme customizer. Just click on Footer Builder in the customizer menu.

The default footer simply has Astra’s prebuilt copyright widget. We’re going to add another one right next to it by simply clicking the footer bar and choosing HTML 1 as the widget. In the HTML 1 we’re going to change the edit to text so we can write in the following code:

<a href="#masthead"><button class="back-to-top" type="button">Scroll to Top</button></a>

It should look like this when you’re done:

Astra Scroll to Top Button

What this code does is create an HTML button and assigns it a custom CSS class called “back-to-top”. We’ll use this in the next step to make the button sticky at the bottom of the screen. The button is linked to #masthead, which is the Astra theme’s ID for the header wrapper – which is a perfect anchor point at the top of every page on your site. When a link is clicked that targets #mastead on any Astra site, the end-result is a scroll back to the top of the page.

Astra Buy Now Banner
Affiliate Link

2. Modify the CSS for the Button to Make it Sticky

Now that you have a button created with the right link to anchor to the top of the page. It’s time to make it sticky. Head over to the Additional CSS section of the theme customizer and enter the following code:

.back-to-top {
	z-index: 10;
	position: fixed;
	bottom: 20px;
	right: 100px;
}

@media (max-width: 920px) {
	.back-to-top {
		bottom: 20px;
		right: 30px;
	}
}

@media (max-width: 480px) {
	.back-to-top {
		bottom: 5px;
		right: 15%;
		width: 70%;
	}
}

What this code does is target the custom CSS class we created in the first step, sets the z-index high so the button is always on top of other elements as you scroll down the page, and then fixes it in the viewport to make it sticky.

The bottom & right settings tell where to offset the sticky nature of the button depending on screen size. Depending on how you want your scroll to top button to look, you might want to modify these settings.

Final Thoughts

While there are plenty of great reasons to by the Pro version of Astra, if you just need this single feature, you can do it yourself without having to pay for it.

Here’s a video of me walking through these customizations:

Sharif Jameel is a business owner, IT professional, runner, & musician. His professional certifications include CASP, Sec+, Net+, MCSA, & ITIL and others. He’s also the guitar player for the Baltimore-based cover band, Liquifaction.

Subscribe to Our Mailing List

If you found the information in this post helpful, we'd love to have you join our mailing list. We promise we won't spam you, we only send out emails once a month or less.

Leave a Comment

Your email address will not be published. Required fields are marked *

You May Also Like:

This site requires the use of cookies to ensure you get the best experience.

Scroll to Top