Thursday 3 October 2013

Add Back To Top Button in Magento

Step-1 Add this Div in Footer.phtml


<div id="back_top" style="display: block;"></div>

Step-2 Add this Java script in footer.phtml


<script type="text/javascript">
    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('body,html').animate({scrollTop:0},500);
    });   
    });
 </script>

Step-3 Add this CSS in styles.css


<style type="text/css">
    #back_top {
    background-color: red;
    bottom: 22px;
    cursor: pointer;
    display: none;
    height: 44px;
    position: fixed;
    right: 200px;
    width: 54px;
}
</style>

3 comments: