Elementor - Scroll To Top Button Reveals on Scroll Down

All credit for this brilliant tutroial goes to Jim Fahad Digital. Link >> here <<.

This tutorial assumes you have a basic understanding of Elementor’s containers and widgets.

  • In your Footer, add a Button Widget anywhere. I’m adding mine below my copyright text, and I’m making it with the up arrow icon.
  • Add styling.
  • Under the Advanced tab select Position: Fixed.
  • For Horizontal Orientation choose Right, and for Vertical choose Bottom.
  • Add “40” to Offset.
  • For the button link you’re going to add an ID to a container at the top of the page. For example, the top container could be “top-container”. To link them add “#top-container” as the button link.
  • Now add an HTML Widget to the top of your container and copy and paste this code with the <script></script> tag:
				
					//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')
    }
})
				
			
  • Now go to the Advanced tab and under Custom CSS of your Button add this code:
				
					selector{
    opacity: 0;
    transition: all 0.3s ease-in-out;
}
body.show selector{
    opacity: 1;
}
				
			

Thank you Jim Fahad Digital!