Scrolling Return to Top

[Jon]

This tutorial will show you how to add a nice and simple scrolling return to top link, similar to the one used on this site.

First you will need to go to Ungrouped Templates > headerinclude

Add the following code

Code:

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>

<script type="text/javascript">
jQuery.noConflict();
jQuery(document).ready(function() {

    jQuery('a[href=#top]').click(function(){
        jQuery('html, body').animate({scrollTop:0}, 'slow');
        return false;
    });

});
</script>

Then you will need to go to Header Templates > header

Add the following code if it's not already there at the top of the template

Code:

<a name="top" id="top"></a>

Now the link in your bottom menu should scroll to the top of the page. If you do not have a link in the bottom menu or no bottom menu at all you can add the link to the following template where you would like it to be,

Footer Templates > footer

Code:

<a href="#top">Return to Top</a>

You can further customize this by replacing the text with an image.