18th Mar, 09:26 pm
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
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
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
You can further customize this by replacing the text with an image.
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.