Scrolling Return to Top - Printable Version

Scrolling Return to Top - Printable Version

+- MyBB Themes - ThemeFreak (http://www.themefreak.net)
+-- Forum: MyBB 1.6.x (http://www.themefreak.net/forumdisplay.php?fid=8)
+--- Forum: Theme Information (http://www.themefreak.net/forumdisplay.php?fid=14)
+---- Forum: Tutorials (http://www.themefreak.net/forumdisplay.php?fid=22)
+---- Thread: Scrolling Return to Top (/showthread.php?tid=66)

Scrolling Return to Top - Jon - 18th Mar

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.

RE: Scrolling Return to Top - Xige Time - 24th Jun

Great tutorial Wink

RE: Scrolling Return to Top - QuadKøre95 - 16th Nov

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

RE: Scrolling Return to Top - Tan - 16th Nov

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

RE: Scrolling Return to Top - QuadKøre95 - 17th Nov

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?