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


How to put Scroll to Top with jQuery on your forum

Page 1 of 2 1, 2  Next

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

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 Nick! on Mon Apr 09, 2012 9:02 pm

This does not work on my forum. I done everything said, and nothing.

Nick!
Member
Member

Posts : 25
Join date : 2012-04-06
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 Mati™ on Mon Apr 09, 2012 9:33 pm

Can you PM me details of a test account which has admin access and your forum link?
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 Nick! on Thu Apr 12, 2012 2:59 am

Your explaining something wrong, this will not work. I've tried it ten times now. Are you sure you've typed it right?

Nick!
Member
Member

Posts : 25
Join date : 2012-04-06
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 BlackNite on Thu Apr 12, 2012 3:59 am

it works oh yeah but the problem is the homepage message is that possible that it won't show in the main page see it
avatar
BlackNite
Member
Member

Posts : 86
Join date : 2012-04-07
Reputation : 4

View user profile http://designforums.forumtl.com/

Back to top Go down

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

Post by BlackNite on Thu Apr 12, 2012 9:56 am

guys also try to put it in announcement even if deactivated so that no CSS will be shown in home page
avatar
BlackNite
Member
Member

Posts : 86
Join date : 2012-04-07
Reputation : 4

View user profile http://designforums.forumtl.com/

Back to top Go down

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

Post by Mati™ on Thu Apr 12, 2012 11:10 am

BlackNite wrote:guys also try to put it in announcement even if deactivated so that no CSS will be shown in home page

that's because you didn't wrap the css with the style tag
Code:
<style>CSS code here</style>


Anyway I'll edit and make this clear on how to use it in PhpBB3, Invision and PunBB and PhpBB2
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 BlackNite on Thu Apr 12, 2012 11:29 am

ah ok ok tnx sir
avatar
BlackNite
Member
Member

Posts : 86
Join date : 2012-04-07
Reputation : 4

View user profile http://designforums.forumtl.com/

Back to top Go down

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

Post by Th1nK on Thu Apr 12, 2012 12:17 pm

Is this now solved?
avatar
Th1nK
Administrator
Administrator

Posts : 468
Join date : 2012-04-06
Reputation : 43

View user profile http://www.csshelp.net

Back to top Go down

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

Post by Mati™ on Sun Apr 15, 2012 3:34 pm

This tutorial has been update enjoy Smile
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 kushy on Mon May 28, 2012 10:45 pm

Very Happy tks for share
avatar
kushy
Member
Member

Age : 24
Posts : 8
Join date : 2012-05-28
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 kushy on Mon May 28, 2012 10:52 pm

PunBB and PhpBB2 creating Step 3 jQuery Code?
avatar
kushy
Member
Member

Age : 24
Posts : 8
Join date : 2012-05-28
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 Tue May 29, 2012 10:20 am

kushy wrote: Very Happy tks for share

kushy wrote:PunBB and PhpBB2 creating Step 3 jQuery Code?

Moderator Notice:
Please don't double post. Your post need to be separated by 24 hours before bumping or replying if you wish to add more information. Please use the edit button instead!

If you do this again you will received a warning.

Thank you.
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 Nathan Adhitya on Sun Jul 08, 2012 9:06 am

I Can't use it
avatar
Nathan Adhitya
Member
Member

Age : 17
Posts : 35
Join date : 2012-07-08
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 Zilla on Sun Jul 08, 2012 10:26 am

Nathan Adhitya wrote:I Can't use it

Be more specific. What can't you use? Are you sure you used the correct tutorial?
avatar
Zilla
Premium Member


Age : 21
Posts : 166
Join date : 2012-05-03
Reputation : 13

View user profile

Back to top Go down

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

Post by Eclipse on Wed Jul 25, 2012 6:18 am

I get this error when i replace the facebook code with the back to top code in the templates
http://i48.servimg.com/u/f48/17/08/32/12/screen24.png




avatar
Eclipse
Premium Member


Age : 19
Posts : 212
Join date : 2012-07-23
Forum Version : PunBB
Reputation : 3

View user profile http://discussionhq.com/

Back to top Go down

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

Post by Th1nK on Wed Jul 25, 2012 8:05 am

HyperActive wrote:I get this error when i replace the facebook code with the back to top code in the templates
http://i48.servimg.com/u/f48/17/08/32/12/screen24.png
You have deleted or added one extra { or }. Check the code again!
avatar
Th1nK
Administrator
Administrator

Posts : 468
Join date : 2012-04-06
Reputation : 43

View user profile http://www.csshelp.net

Back to top Go down

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

Post by Mati™ on Wed Jul 25, 2012 11:39 am

What facebook code you mean?
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 Eclipse on Wed Jul 25, 2012 2:55 pm

I fixed the problem, but could you tell me how to make it smaller? like yours? because i want it to the far right, not over my widgets




avatar
Eclipse
Premium Member


Age : 19
Posts : 212
Join date : 2012-07-23
Forum Version : PunBB
Reputation : 3

View user profile http://discussionhq.com/

Back to top Go down

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

Post by Mati™ on Wed Jul 25, 2012 3:01 pm

You can change right to 5px or you can put a image like we have it here. Cool
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 Th1nK on Wed Jul 25, 2012 7:22 pm

Yeah you can change the size by CSS.
avatar
Th1nK
Administrator
Administrator

Posts : 468
Join date : 2012-04-06
Reputation : 43

View user profile http://www.csshelp.net

Back to top Go down

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

Post by Eclipse on Thu Jul 26, 2012 6:24 pm

Is there a way to make it on the left? instead of right? because im using FM chat, and FMchat is on the right, and its just messy with both of them on the right




avatar
Eclipse
Premium Member


Age : 19
Posts : 212
Join date : 2012-07-23
Forum Version : PunBB
Reputation : 3

View user profile http://discussionhq.com/

Back to top Go down

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

Post by Mati™ on Thu Jul 26, 2012 6:36 pm

Simply change right to left.
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 Eclipse on Thu Jul 26, 2012 9:26 pm

Where can i do that?




avatar
Eclipse
Premium Member


Age : 19
Posts : 212
Join date : 2012-07-23
Forum Version : PunBB
Reputation : 3

View user profile http://discussionhq.com/

Back to top Go down

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

Post by Mati™ on Thu Jul 26, 2012 9:33 pm

In the CSS code for back to top...
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 Sponsored content


Sponsored content


Back to top Go down

Page 1 of 2 1, 2  Next

View previous topic View next topic Back to top


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