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>![[Image: Shia-Labeouf-motivation-just-do-it.gif?t=1433428170]](https://nulledbb.com/c/ff635d9833bd8de48f2bd6d58539408580e2db76/687474703a2f2f693235382e70686f746f6275636b65742e636f6d2f616c62756d732f68683235332f6a696d6966756e67757a7a2f536869612d4c6162656f75662d6d6f7469766174696f6e2d6a7573742d646f2d69742e6769663f743d31343333343238313730/Shia-Labeouf-motivation-just-do-it.gif?t=1433428170)