Elementor – Add “Go To Top” button

Word Count: 177

The Go-to-top button widget is unavailable in both the Elementor free and Pro versions. We can make use of JavaScript to provide this function.

  • Add an arrow icon using the Icon Widget inside the header or footer, e.g. under the header logo.
  • In the Icon Widget advanced tab:
    • apply custom CSS ID: cu-go-top-btn
    • Positioning:
      • set width = Custom
      • set Custom Width = 100% (this sets the element container width to the width of the image / icon)
    • apply Position fixed to place the icon at the bottom right of the page.
  • Style the icon according to the design.
  • Add Motion Effects so that the icon only shows up when the page is scrolled down by some pixels.
    • Go to Motion Effects -> Transparency
    • Direction: Fade In,
    • Level: 10,
    • Viewport: 4% – 7%
    • Entrance Animation: Fade In, Duration: Normal (for hiding the icon during page loading)
  • Use the plugin “Insert Headers and Footers”, or some other means to add the following JavaScript / jQuery to the footer:
<script>    
    jQuery(document).ready(function () {	
        jQuery('#cu-go-top-btn').click(function(){ 
            jQuery('html,body').animate({scrollTop: 0}, 800);
            return false;     
        }); 	
    });  	
</script>
Tags: ,