How to add back to top button in Magento 2?
-
06-03-2021 - |
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?
Solution
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>