Choose from our various pricing plans. There is a package for everyone!


How to put Scroll to Top with jQuery on your forum

Page 2 of 2 Previous  1, 2

View previous topic View next topic Go down

Tutorial How to put Scroll to Top with jQuery on your forum

Post by Mati™ on Mon Apr 09, 2012 8:32 pm

First topic message reminder :

If you have lots of content, its a good idea to provide visitors with an easy way to quickly scroll to the top of the page. In this tutorial, we will create smooth page scrolling effect for returning to the top of the page using jQuery. This tutorial is compatible for all forum versions.


For phpbb3 and Invision



Step 1: Go to the Administration Panel => General => Messages and e-mails --> Announcements

General announcements options
- Activate announcements: Yes
- Announcements display: All pages
- Scrolling: Deactivate
+ Save

After saving that you need to add new Announcements: Then paste this HTML code inside your Content box and Save.

The HTML
Code:
<div id="backtotop">^ Back to Top</div>

Now we need to style it with CSS:

Step 2: Go to the Administration Panel => Display => Pictures and Colors --> Colors -->  CSS Stylesheet paste this CSS code and Save.

The CSS:
Code:
   
#backtotop {
     bottom: 50px;
     color: #FFFFFF;
     cursor: pointer;
     display: none;
     font-size: 14px;
     opacity: 0.6;
     padding: 8px;
     position: fixed;
     text-align: center;
     z-index: 999;
     right: 30px;
     background-color : #000;
     border-radius : 8px;
     -webkit-border-radius : 8px;
     -moz-border-radius : 8px;
    }
    #backtotop:hover {
     opacity  : 0.9;
    }

Now we want to make the button visible if the page is scrolled down. We can do that with jQuery scroll event.

Step 3: Go to the Administration Panel => Modules => HTML & JAVASCRIPT => Javascript codes management ---> Create a new javascript put the jQuery Code and set its placement to all pages.

jQuery Code:
Code:
   $(function() {
       $(window).scroll(function() {
          if($(this).scrollTop() != 0) {
             $('#backtotop').fadeIn();  
         } else {
             $('#backtotop').fadeOut();
          }
       });
    
      $('#backtotop').click(function() {
          $('body,html').animate({scrollTop:0},800);
       });  
   });

After you done, saving all the codes you should be able to to see the "Back to top" button on your right side of the forum.




For PunBB and PhpBB2 installation guide Templates



You will copy the above installation guide exactly the same but you will add The HTML code to Templates

Step 1: Go to the Administration Panel => Display => Templates --> General --> overall_footer_end

Find this part
Code:
<!-- BEGIN switch_facebook_login -->

And paste this HTML code above that

The HTML
Code:
<div id="backtotop">^ Back to Top</div>

Save and Publish Templates

DEMO: you can see it on the right side on this forum.

Hope you guys like this. Please don't forget to drop your comments. Very Happy


Last edited by Mati™ on Sat Nov 15, 2014 2:02 am; edited 4 times in total
avatar
Mati™
Administrator
Administrator

Age : 31
Posts : 2112
Join date : 2011-10-20
Forum Version : PhpBB3
Reputation : 147

View user profile http://fmfocus.forumotion.net/forum

Back to top Go down


Tutorial Re: How to put Scroll to Top with jQuery on your forum

Post by Bimbas on Fri Aug 10, 2012 6:41 pm

how can i instal this on PunBB?
avatar
Bimbas
Member
Member

Age : 27
Posts : 6
Join date : 2012-08-09
Reputation : 0

View user profile

Back to top Go down

Tutorial Re: How to put Scroll to Top with jQuery on your forum

Post by Mati™ on Fri Aug 10, 2012 6:51 pm

My first post says it all. Rolling Eyes
avatar
Mati™
Administrator
Administrator

Age : 31
Posts : 2112
Join date : 2011-10-20
Forum Version : PhpBB3
Reputation : 147

View user profile http://fmfocus.forumotion.net/forum

Back to top Go down

Tutorial Re: How to put Scroll to Top with jQuery on your forum

Post by Brother on Thu Sep 06, 2012 8:24 am

Nice tutorial..
But, how to make Scroll to Down button? Very Happy
avatar
Brother
Member
Member

Age : 26
Posts : 57
Join date : 2012-07-13
Reputation : 1

View user profile

Back to top Go down

Tutorial Re: How to put Scroll to Top with jQuery on your forum

Post by NirDine on Thu Feb 28, 2013 5:30 am

I followed all the instructions correctly, the button works on the site in general, but not in the topics. The fadeIn fadeOut works but doesn't redirect to the top of the site.
avatar
NirDine
Member
Member

Age : 23
Posts : 7
Join date : 2012-06-06
Reputation : 0

View user profile

Back to top Go down

Tutorial Re: How to put Scroll to Top with jQuery on your forum

Post by J0k3R^ on Thu Apr 25, 2013 5:10 pm

gracias amigos cheers
avatar
J0k3R^
Member
Member

Age : 24
Posts : 25
Join date : 2013-04-25
Forum Version : PunBB
Reputation : 1

View user profile http://fmplanet.forumgreek.com/

Back to top Go down

Tutorial Re: How to put Scroll to Top with jQuery on your forum

Post by J0k3R^ on Thu Apr 25, 2013 5:18 pm

ive got this code in a widget:

Code:
<!--Buttons For Top And Bot-->
        <div style= "position:fixed; right:0.1%; bottom:45%;">
        <div id="nav_up"><img src="http://icons.iconarchive.com/icons/wefunction/woofunction/32/blue-arrow-up-icon.png" alt="Top" title="Top" border="0"/></div><br>
        <div  id="nav_down"><img src="http://icons.iconarchive.com/icons/wefunction/woofunction/32/blue-arrow-down-icon.png" alt="Bottom" title="Bottom" border="0"/></div>
        </div>


              <script type="text/javascript">
                jQuery(function() {
                    var overelem = jQuery('body');
               
                    jQuery('#nav_up').fadeIn('slow');
                    jQuery('#nav_down').fadeIn('slow');
                                   
                    jQuery('#nav_down').click(
                      function (e) {
                          jQuery('html, body').animate({scrollTop: overelem.height()}, 1100);
                      }
                    );
                    jQuery('#nav_up').click(
                      function (e) {
                          jQuery('html, body').animate({scrollTop: '0px'}, 1100);
                      }
                    );
                    });
                </script>

but it only works if i am in my homepage. if i go t a topic for an example, the images are visible but if i press em they dont do nothing. any help? thanks Smile
avatar
J0k3R^
Member
Member

Age : 24
Posts : 25
Join date : 2013-04-25
Forum Version : PunBB
Reputation : 1

View user profile http://fmplanet.forumgreek.com/

Back to top Go down

Tutorial Re: How to put Scroll to Top with jQuery on your forum

Post by pbaddict on Wed Jun 12, 2013 5:50 pm

hi, just registered... i was wondering if it's possible to put the HTML elsewhere instead of under announcements? coz it leaves this nasty space --> 

looking forward to your help, thanks!
avatar
pbaddict
Member
Member

Age : 37
Posts : 2
Join date : 2013-06-12
Forum Version : Invision
Reputation : 0

View user profile

Back to top Go down

Tutorial Re: How to put Scroll to Top with jQuery on your forum

Post by Mati™ on Fri Jun 14, 2013 2:37 pm

Please post your forum url so we can fix the space.
avatar
Mati™
Administrator
Administrator

Age : 31
Posts : 2112
Join date : 2011-10-20
Forum Version : PhpBB3
Reputation : 147

View user profile http://fmfocus.forumotion.net/forum

Back to top Go down

Tutorial Re: How to put Scroll to Top with jQuery on your forum

Post by pbaddict on Fri Jun 14, 2013 3:20 pm

Matti wrote:Please post your forum url so we can fix the space.
avatar
pbaddict
Member
Member

Age : 37
Posts : 2
Join date : 2013-06-12
Forum Version : Invision
Reputation : 0

View user profile

Back to top Go down

Tutorial Re: How to put Scroll to Top with jQuery on your forum

Post by DooGy00 on Tue Aug 06, 2013 5:28 am

thanks so much
avatar
DooGy00
Member
Member

Age : 41
Posts : 1
Join date : 2013-08-06
Forum Version : PhpBB3
Reputation : 0

View user profile

Back to top Go down

Tutorial Re: How to put Scroll to Top with jQuery on your forum

Post by unleashed on Sat Aug 24, 2013 5:55 am

i tried but not working on this i just got a ^backto top^ <-- this message under board discription

any help ?

thanks
avatar
unleashed
Member
Member

Age : 32
Posts : 22
Join date : 2013-08-24
Forum Version : PhpBB3
Reputation : 0

View user profile

Back to top Go down

Tutorial Re: How to put Scroll to Top with jQuery on your forum

Post by mangaka on Wed Aug 28, 2013 12:37 pm

Yeah not working for me either.
avatar
mangaka
Member
Member

Age : 23
Posts : 18
Join date : 2013-07-30
Forum Version : PunBB
Reputation : 0

View user profile

Back to top Go down

Tutorial Re: How to put Scroll to Top with jQuery on your forum

Post by unleashed on Fri Oct 11, 2013 3:05 am

i love this matti thanks for providing this code

but i want to change that picture something new that suits for my forum so any help from it ?

Thanks once again

A Hint : some thing in blue like ur forum theam

Thanks
avatar
unleashed
Member
Member

Age : 32
Posts : 22
Join date : 2013-08-24
Forum Version : PhpBB3
Reputation : 0

View user profile

Back to top Go down

Tutorial Re: How to put Scroll to Top with jQuery on your forum

Post by Nubss on Thu Feb 27, 2014 11:08 pm

This works and looks great, thanks! Very Happy
avatar
Nubss
Member
Member

Age : 21
Posts : 18
Join date : 2014-02-24
Forum Version : PunBB
Reputation : 1

View user profile

Back to top Go down

Tutorial Re: How to put Scroll to Top with jQuery on your forum

Post by Sponsored content


Sponsored content


Back to top Go down

Page 2 of 2 Previous  1, 2

View previous topic View next topic Back to top


 
Permissions in this forum:
You cannot reply to topics in this forum