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
#2
Great tutorial Wink
Reply
#3
@Jon Great tutorial friend, but where can I see a demonstration if this really works fine?
Reply
#4
This is what I use on all the themes including this support forum
Reply
#5
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?
Reply




Users browsing this thread: 1 Guest(s)