Knowledge Base

Updated on May 17, 2023

Elementor Scroll to Top Button

Overview

Create a scroll to top button without using a plugin so that a visitor can click to go to top of the page.

Solution

Give your Header Section or Container a class ID. We’ve named ours “top”. The class section is in the Elementor Editor >> Advanced tab.

Add a Button to you Footer section and fix to bottom. This is done in Elementor Editor >> Advanced >> Position, set to Fixed. We also gave our button a vertical and horizontal offset of 40 pixel so it sits nicely on the bottom. Style the button to suit your theme. Give your button URL link a setting of #top, this will make the page scroll to the top Section/Container when clicked ie using an anchor link.

Next we need to add some JS and CSS to only show the button when scrolling down, we’re making it visible after 300 pixel down the page.

Add the following custom CSS to the Button

selector {
    opacity: 0;
    transition: all 0.3s ease-in-out;
}
.show selector {
    opacity: 1;
}

In Elementor, in the footer section, add the <html> widget anywhere and add this jQuery code

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
//You can replace offset value from here
var offset = 300
$(window).on('load scroll', function(){
    
    if( $(window).scrollTop() > offset ){
        $('body').addClass('show')
    }else{
        $('body').removeClass('show')
    }
})
</script>