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

Last updated on October 3rd, 2023 at 04:24 pm


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 may contain 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.

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:

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:

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.

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 bands, Liquifaction and Minority Report.

6 thoughts on “Astra Scroll to Top: How to Create a Scroll to Top Button in the Free Version of Astra (Video)”

    1. Hi and thanks for visiting my site. Yes, you could use a Font Awesome icon. You’ll need to install the Font Awesome plugin so that the icons are available as they don’t come natively with Astra. Once you choose an icon, you’ll want to call that in the footer builder instead of the button code, so for example if you wanted to use the Font Awesome car icon, you’d use:
      i class="fa fa-car" style="font-size:48px;"
      That will put the icon in place on the footer and then you can adjust the custom CSS by targeting the Font Awesome class instead of the custom button class we created in the post. In this example it would be this:
      .fa-car {
      z-index: 10;
      position: fixed;
      bottom: 20px;
      right: 100px;
      }

      I’ve tested this on my demo site and it all works just fine.

  1. I had to use HTML2 block as 1 already being used but it’s working great. Thanks for this helpful function for the free version of Astra.

Leave a Comment

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


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.


You May Also Like:

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

Scroll to Top