How To Add A Scroll-To-Top Button In Astra Free: With or Without Plugin

How to add a scroll-To-top button in Astra free

Being an Astra user, I have experienced a situation adding a scroll-to-top button with the free version. The premium version gives you the feature when you have the Astra Pro plugin. But, can we do it with the free version? Actually, we can and there are a couple of ways. We bring you two easy ways to add a scroll-to-top button to your website. They are;

  • How to add a scroll-to-top button in Astra free using custom code
  • How to add a scroll-to-top button in Astra free with plugin

This is going to be a very short tutorial, so let’s jump into the process?

How to Add a Scroll-to-top Button in Astra Free Using Custom Code

Adding a scroll-to-top button using custom codes is only a matter of copy and paste. Here, you will require two sets of codes to put in two different places to complete the process.

Need to mention, you can use the codes with other themes as you are doing it using Astra to add a scroll-to-top button on the website

So, let’s go step by step with the process;

Step 1: Copy the code and move on to step 2.

<a id="flywithwp-scroll-top" class="flywithwp-scroll-to-top" title="scroll to top" href="#page">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="12" cy="12" r="12" fill="#1C1C1C"/>
<path d="M12.5281 18.9C12.9714 18.9 13.3389 18.7839 13.3389 18.3367V11.1041L16.1686 13.9339C16.4811 14.2463 16.9908 14.2463 17.3091 13.9339L18.0688 13.1742C18.3812 12.8617 18.3812 12.352 18.0688 12.0337L12.5714 6.53633C12.4152 6.3801 12.2101 6.30005 12.0031 6.30005C11.7981 6.30005 11.5911 6.3801 11.4348 6.53633L5.93745 12.0337C5.62502 12.3462 5.62502 12.8559 5.93745 13.1742L6.69713 13.9339C7.0096 14.2463 7.51931 14.2463 7.83762 13.9339L10.6576 11.1041L10.6576 18.375C10.6576 18.8184 11.0348 18.9 11.4781 18.9H12.5281Z" fill="white"/>
</svg>
</a>

Step 2: Go to WordPress Dashboard>Customize, click on the ‘Footer Builder’ and do as below;

  1. Add the HTML 1 element in the below footer area
  2. Click on the ‘Text’ under the General tab
  3. Paste the code 
  4. Hit the ‘Publish’ button

You will have the button at bottom.

SVG file in HTML fotter element in astra to add a scroll-to-top button

Step 3: Copy the code and go to the next step.

function flywithwp_custom_css() {
    ?>
    <style>
        /* Scroll Top */
        .flywithwp-scroll-to-top{
                position: fixed;
            right: 60px;
            z-index: 100;
            opacity: 0;
            bottom: 20px;
            -webkit-transform: translate3d(0,20px,0);
            transform: translate3d(0,20px,0);
            -webkit-transition: opacity .3s ease-in-out,visibility .3s ease-in-out,-webkit-transform .3s ease-in-out;
            transition: opacity .3s ease-in-out,visibility .3s ease-in-out,-webkit-transform .3s ease-in-out;
            transition: opacity .3s ease-in-out,visibility .3s ease-in-out,transform .3s ease-in-out;
            transition: opacity .3s ease-in-out,visibility .3s ease-in-out,transform .3s ease-in-out,-webkit-transform .3s ease-in-out;
        }
        .flywithwp-scroll-to-top svg {
            width: 40px;
            height: 40px;
                color:#fff;
        }
        .active-scroll-top {
            opacity: 1;
            visibility: visible;
            -webkit-transform: translateZ(0);
            transform: translateZ(0);
        }
        a.flywithwp-scroll-to-top:hover, a.flywithwp-scroll-to-top:focus{
            color:#fff;
        }
        @media screen and (max-width: 767px) {
        .flywithwp-scroll-to-top{
                right: 30px;
            }
        }
    </style>
    <?php
}
add_action('wp_head', 'flywithwp_custom_css');
function flywithwp_custom_javascript() {
    ?>
    <script type="text/javascript">
            window.addEventListener( 'scroll', initFlyWithWpScrollToTop );
            /**
             * Initiate the script to process Scroll to Top.
             */
            function initFlyWithWpScrollToTop() {
                if( ! document.getElementById("flywithwp-scroll-top") ) {
                    return;
                }
                const scroll = window.pageYOffset | document.body.scrollTop;
                var scrollTopClick = document.querySelector( '.flywithwp-scroll-to-top' );
                if ( scroll > 300 ) {
                    document.getElementById("flywithwp-scroll-top").classList.add('active-scroll-top');
                } else {
                    document.getElementById("flywithwp-scroll-top").classList.remove('active-scroll-top');
                }
                scrollTopClick.addEventListener( 'click', function (event) {
                    event.preventDefault();
                    window.scrollTo({ top: 0, behavior: 'smooth' });
                });
            }
        </script>
    <?php
}
add_action('wp_footer', 'flywithwp_custom_javascript');

Step 4: Go to WordPress Dashboard>Theme File Editor, paste the code in functions.php, and hit the Update File button to save.

custom css code in functions.php to add a scroll-to-top button

The process is done. See how it looks finally

Scroll-to-top button using code in Astra

How to Add a Scroll-to-top Button in Astra Free with Plugin

Adding a scroll-to-top button in Astra using a free plugin is easy as well. Go to WordPress Dashboard>Plugins>Add New. Search by ‘Wpfront Scroll Top’ and select the plugin, install & activate.

plugin for scroll to top button in Astra

Step 1: You will have a new CPT under WordPress Settings named ‘Scroll Top’. Make some changes and select the button;

  • Enable the scroll-to-top button using the checkbox
  • Set Scroll Duration. (The higher the value the slower the scrolling will be)
  • Select a scroll-to-top button
  • Hit the Save Changes button
scroll-to-top settings in smart slider

Step 2: Now, go to your website and scroll down. You will have the button added on the bottom-right corner. Hit the button to reach the top.

add scroll-to-top button in Astra website

We have mentioned the basic feature of the plugin to create a scroll-to-top button. There are more options you can customize from the WPFront Top Settings. You can change the button size, adjust opacity, fade timing, auto hide, positioning, etc., and a lot more.

Related Posts

How To Add A Slider In Astra: Full-Width Or Boxed
How To Add Top Bar In Astra Free Theme
How To Make Sticky Header In Astra Free And Pro

Final Verdict

We have discussed two different ways on how to add a scroll-to-top button in Astra free theme. Both of them are easy and effective but I suggest using the Custom CSS code to do that. This will serve the purpose quite well but will not add extra load as the plugin.

Try by yourself and share your experience in the comment section below which one you find convenient.

FAQ

What is the scroll-to-top top button?

The scroll-to-top button is a quick navigation to reach at the top of a webpage with just a click. Suppose you are going through a long article containing thousands of words. When you reach the end of the page, you may need to get to the top for some other purposes. Then, you have to use the progress bar of the page or scroll up using your mouse. But, if there is a scroll-to-top button, you can just click on that to reach at the top without any hassle.

How do I make the top button scroll in WordPress?

You can make the top button scroll in WordPress using the Custom CSS code. The process is simple and no issue with page loading speed. Well, I have tried using a plugin but comparing both the ways, I preferred using the code.

How do I scroll fast on top?

To scroll fast on top of a webpage, first you need to decide which way you want to go with. You can use Custom CSS code or a plugin for that. If you are using Custom CSS codes, you can define the behavior ‘instant’ to scroll instantly. The behavior is a coding language that indicates scrolling style.

Also, you can do it using a plugin. In that case, you need to decrease the value in the ‘Scroll Duration’ option. The lower the value, the faster scrolling you get. You can have the complete procedure from our blog “How To Add Scroll To Top Button In Astra Free”
In the code, I’ve used ‘instant’ or ‘auto’ to reach to the top fast. If you use the plugin, you need to decrease the value in the ‘Scroll Duration’ option. The lower the value, the faster scrolling you get.

How to add a scroll-to-top button in Astra Pro?

To add a scroll-to-top button in Astra Pro, you need to install the Astra Pro Addon first. Go to WordPress Dashboard>Appearance>Astra Options and activate the Scroll To Top feature. Now, go to WordPress Dashboard>Customize, click on Global and then Scroll To Top. Select devices where you want to show it, customize the button as you need, and publish. You will have your scroll-to-top button. 

Expert Team
The expert Team at FlywithWp is a team of WordPress experts. The team comprises developers, native speakers, and researchers with in-depth knowledge.
read full bio
Write first comment in this post.
Leave a reply

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