Hello There, Guest! Login Register
Thread Rating:
  • 0 Vote(s) - 0 Average
  • 1
  • 2
  • 3
  • 4
  • 5
Scrolling Return to Top
#1
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.
Reply


Messages In This Thread
Scrolling Return to Top - Jon - 18th Mar, 09:26 pm
RE: Scrolling Return to Top - Xige Time - 24th Jun, 03:23 pm
RE: Scrolling Return to Top - Tan - 16th Nov, 08:16 pm



Users browsing this thread: 1 Guest(s)