back to top button

Try This (as a guideline/suggestion) . . .

STEP ONE:
Add this Div in footer.phtml

Code:

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

STEP TWO:
Add this Java script in footer.phtml

Code:

<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 THREE:
Add the CSS styles.css -- FOR EXAMPLE . . .

Code:

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

The above CSS is merely an example … You can, of course, modify the various properties to best suit your particular site theme.

Hope That Helps

Thanks a lot TomC, works great!

Glad to be of assistance . . . All the best with your continuing site development.