How to add back to top button in Magento 2?

Question

I want to add back to top button on our site. I referred the below link http://magentosource.blogspot.com/2013/10/add-back-to-top-button-in-magento.html

But we have no footer.phtml.

Could anyone please help me where to add this footer.html and how to create back to top button?

Answer 1

If your theme doesn't have footer.phtml then it is probably calling core footer.phtml which is:

vendor/magento/module-theme/view/frontend/templates/html/footer.phtml

copy above footer.phtml to your theme directory app/design/frontend/Vendor/Theme/templates/html/ and do the needful there.

After your development in footer.phtml run these commands:

php -dmemory_limit=1G bin/magento setup:static-content:deploy -f
php bin/magento cache:clean

Edit:

I have checked the link you have shared, it is not working. Please try this code below, you can add this code in app/code/frontend/Vendor/YourTheme/templates/html/header.phtml

<div id="back_top" style="display: block;"></div>
<style type="text/css">
    #back_top {
    background-color: red;
    bottom: 22px;
    cursor: pointer;
    display: none;
    height: 44px;
    position: fixed;
    right: 200px;
    width: 54px;
    z-index:999;
}
</style>
<script>
    require([
        'jquery'
    ], function($){
        jQuery(window).scroll(function() {
            if (jQuery(this).scrollTop() > 300) {
                jQuery('#back_top').fadeIn();
            } else {
                jQuery('#back_top').fadeOut();
            }
        });
        jQuery("#back_top").click(function() {
            jQuery("html, body").animate({ scrollTop: 0 }, "slow");
            return false;
        });
    });
</script>