IMPORTANT: If you do not want to go through this entire tutorial, you can install a script called EAGER which is only a JavaScript file include install. It will add a 'scroll-to-top' button automatically. It has a couple other apps you can install with one-click! I really love Eager.
I'll add a tutorial so you don't need to do research if you'd like to implement it.
You can find this tutorial here.
Step 1:
Open your footer template and add the following code at the very beginning:
Code:
<script type="text/javascript">
jQuery.noConflict();
jQuery(function($) {
$("#backtop").hide();
$(window).scroll(function () {
if ($(this).scrollTop() > 400) {
$('#backtop').fadeIn(200);
} else {
$('#backtop').fadeOut(200);
}
});
$('.go-top').click(function () {
$('html,body').animate({
scrollTop: 0
}, 1000);
return false;
});
});
</script>
Code:
<div id='backtop'>
<a class='go-top' href='#top' title='Back to Top'><img src="{$theme['imgdir']}/top.png" /></a>
</div>
Step 2:
Open global.css and add at the end:
Code:
#backtop {
position: fixed;
bottom: 50px;
right: 10px;
margin: 0;
padding: 0;
width: 36px;
height: 36px;
z-index: 100;
}
Step 3:
Upload this up button in your theme image directory:
Remember to include jQ library in MyBB if it is already not. In headerinclude:
Code:
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>