MyBB Community Forums

This tutorial is an advanced version of my earlier tutorial 'Appearing Scroll to Top'
http://community.mybb.com/thread-126708.html
http://demonate.com/thread-757.html
having the ability to scroll to bottom as well.

jQuery library is required to implement this as the script is written in jQuery. So if you have already not included jQuery library include now first. [How]

Next, open your 'headerinclude' template and add this script exactly at the end:

<script type="text/javascript">
jQuery(document).ready(function(jQ){
    appear();
    
    jQ(window).scroll(function(){
        appear();
    });
                      
    function appear() {
        if (jQ(this).scrollTop() > 200) {
            jQ('#scroll_up').fadeIn('slow');
        } else {
            jQ('#scroll_up').fadeOut('slow');
        }
        if (jQ(this).scrollTop() < (jQ('body').height() - (200+jQ(window).height()))) {
            jQ('#scroll_dn').fadeIn('slow');
        } else {
            jQ('#scroll_dn').fadeOut('slow');
        }
    };
    
    jQ('#scroll_up').click(function(){
        jQ('body').stop().animate({scrollTop: 0}, 600);
    });
    jQ('#scroll_dn').click(function(){
        jQ('body').stop().animate({scrollTop: jQ('body').height()}, 600);
    });
});
</script>

And the styling part of the buttons, add this style declaration at the end of your global.css:

#scroll_up, #scroll_dn {
  position: fixed;
  right: 5px;
  width: 35px;
  height: 35px;
  cursor: pointer;
  display: none; 
  z-index: 999;
  background:  #026CB1 url(images/sc_arrow.png) center no-repeat;
}
#scroll_up {
    bottom: 50px;
}
#scroll_dn {
    bottom: 10px;
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    transform: rotate(180deg);
}

Next, open your 'footer' template and find:

<hr class="hidden" />
			<div id="copyright">

Make it:

<hr class="hidden" />
<span id='scroll_up'></span><span id='scroll_dn'></span>
			<div id="copyright">

Now upload the attached arrow image 'sc_arrow.png' in your images folder. If you are using theme specific or different location for uploading your images : revise the image path in CSS accordingly.

Finetuning:
1. The values 200 in the script are the gaps from top / bottom (in pixels) in which position the buttons will hide / appear, change as you need.
2. The values 600 in the script are the travel times of animation to reach the top / bottom (in miliseconds). Change as you need.
3. The button appearance speed is set to 'slow'. You can change it to 'fast' or any numeric value representing miliseconds (for example: 500 [without single quotes]).
4. I've re-used same arrow for both using css transform rotate. You may upload a separate down arrow and apply.

My first tutorial is used in forums hugely and everyone knows how this works, so I'm not adding any live demo as of now.

Happy coding

this not work in mybb 1.8. any ideas? thanks

If you follow the tutorial and just skip the part below it should work fine.

"jQuery library is required to implement this as the script is written in jQuery. So if you have already not included jQuery library include now first. [How]"

(2015-05-10, 02:30 PM)hkkp Wrote: [ -> ]this not work in mybb 1.8. any ideas? thanks

Wasn't working for me with standard MyBB 1.8.x and of course no include until I changed a few lil things...,

Edit headerinclude:

<script type="text/javascript">    
$(document).ready(function(){
    appear();
    $(window).scroll(function(){
       appear();
    });                    
    function appear() {
        if ($(this).scrollTop() > 200) {
           $('#scroll_up').fadeIn('slow');
        } else {
           $('#scroll_up').fadeOut('slow');
        }
        if ($(this).scrollTop() < ($('html, body').height() - (200+$(window).height()))) {
            $('#scroll_dn').fadeIn('slow');
        } else {
            $('#scroll_dn').fadeOut('slow');
        }
    }; 
    $('#scroll_up').click(function(){
        $('html, body').stop().animate({scrollTop: 0}, 600);
    });
    $('#scroll_dn').click(function(){
                    $('html, body').stop().animate({scrollTop:$('html, body').height()}, 600);
                    });
                });    
</script> 

Edit footer:


above:

            <span id="copyright">

add:

            <span id="scroll_up"></span><span id="scroll_dn"></span> 

And as a basic plugin...

Appearing Scroll to Top Bottom (1.0)
Adds a scroll to top and bottom

Plugin Created by: Vintagedaddyo

[attachment=37973]

Or a different variant as a basic plugin:

With images example:


[jQuery] Smooth Scroll to Top Bottom (1.0)

Adds a smooth scroll to top and bottom

Created by: Vintagedaddyo


With Font-Awesome Example:


[jQuery] Smooth Scroll to Top Bottom Font-Awesome (1.0)

Adds a smooth scroll to top and bottom using font-awesome

Created by: Vintagedaddyo


[attachment=37980]

Thank you effone!

really interested in this addition... but the plugin is not working properly and I can't make the arrows appear in the tutorial of effone.

(2017-04-28, 10:53 PM)zyra Wrote: [ -> ]really interested in this addition... but the plugin is not working properly and I can't make the arrows appear in the tutorial of effone.

Have you tried the modified version of the tutorial I mentioned previously here: post #4 as a few things needed to be changed to get it working?


Edit headerinclude:

<script type="text/javascript">    
$(document).ready(function(){
    appear();
    $(window).scroll(function(){
       appear();
    });                    
    function appear() {
        if ($(this).scrollTop() > 200) {
           $('#scroll_up').fadeIn('slow');
        } else {
           $('#scroll_up').fadeOut('slow');
        }
        if ($(this).scrollTop() < ($('html, body').height() - (200+$(window).height()))) {
            $('#scroll_dn').fadeIn('slow');
        } else {
            $('#scroll_dn').fadeOut('slow');
        }
    }; 
    $('#scroll_up').click(function(){
        $('html, body').stop().animate({scrollTop: 0}, 600);
    });
    $('#scroll_dn').click(function(){
                    $('html, body').stop().animate({scrollTop:$('html, body').height()}, 600);
                    });
                });    
</script> 

Edit footer:


above:

            <span id="copyright">

add:

            <span id="scroll_up"></span><span id="scroll_dn"></span> 

Add to your global.css:

#scroll_up, #scroll_dn {
   position: fixed;
   right: 5px;
   width: 35px;
   height: 35px;
   cursor: pointer;
   display: none; 
   z-index: 999;
   background:  #026CB1 url(images/sc_arrow.png) center no-repeat;
 }
 #scroll_up {
     bottom: 50px;
 }
 #scroll_dn {
     bottom: 10px;
     -webkit-transform: rotate(180deg);
     -moz-transform: rotate(180deg);
     -ms-transform: rotate(180deg);
     -o-transform: rotate(180deg);
     transform: rotate(180deg);
 }

Add to your css3.css:

#scroll_up, #scroll_dn {
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
    border-radius: 6px;
}

Download and add this image to your images directory:
[attachment=38847]