Astra Scroll to Top: How to Create a Scroll to Top Button in the Free Version of Astra (Video)

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.

Related Post: Create a Sticky Header with The Free Version of Astra

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:

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.

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:

Once you have it all set up, a plugin that adds smooth scrolling will also be beneficial for the UX when the button is clicked.

If you need help getting it to work, we have competitive rates – get your website design quote now.