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.

[Xige Time]

Great tutorial

[QuadKøre95]

@Jon Great tutorial friend, but where can I see a demonstration if this really works fine?

[Tan]

This is what I use on all the themes including this support forum

[QuadKøre95]

How can I modify the speed of the scrolling animation? I see in the script 'slow' so I think that I just need to replace this with: 'medium' or 'fast', right?