Magento2 Add Scroll Totop Button With Jquery Without Extension (Module)

By vijayrami

Saturday, November 21, 2020

Share :

Tweet

Magento2,

Most of E-commerce sites have lots of products/offers on home page to show the visitors to purchase. So that's why it is necessary to add "scroll to top" button at footer to reach at top of the page again.

In this article, you will learn to add "Scroll to Top" button at footer just by modifying template files and with little Jquery. There are many extension available for this task. But here we will not creating any extension.

First, find your theme's footer.phtml file.

You can add below code:

<a id="totop" class="ic ic-up" href="#top"></a>

in class tag you can add your class to display up icon and add little css for that.
Well, in this post i will not share any design tips.

ID is needed for Jquery initialization process. 

In href tag, you need to attach an ID of the header html.

Now, open your header.phtml file and append id="top ..." in it. 

Finally, you need to add javascript in footer.phtml file.

Add below code in it.

<script type="text/javascript">
      require([ 'jquery'], function ($) {
      var windowScroll_t;
        $(window).scroll(function(){
            clearTimeout(windowScroll_t);
            windowScroll_t = setTimeout(function() {
                                        
                if ($(this).scrollTop() > 100)
                {
                    $('#totop').fadeIn();
                }
                else
                {
                    $('#totop').fadeOut();
                }
            
            }, 500);
            
        });
        
        $('#totop').click(function(e){
            e.preventDefault();
            $("html, body").animate({scrollTop: 0}, 600, "easeOutCubic");
            return false;
        });
    }); 
</script>

Tag : Magento2