FIXED Top of Page Button

Sparkks · 30-06-2015, 11:41 PM

I'm always using the "go to top" button on the websites that I use, and I believe it would be great for this one, especially because we allow multiple nested quotes.

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>

...and at the end before two close </div> tags:

Code:
<div id='backtop'>
   <a class='go-top' href='#top' title='Back to Top'><img src="{$theme['imgdir']}/top.png" /></a>
 </div>

Save your footer template.

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:
[Image: attachment.php?aid=27311]

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>

FIXED Top of Page Button

Submitted by Sparkks, 30-06-2015, 11:41 PM, Thread ID: 5388