how to add a thing that can make you go to top of page

by Jack Atlas December 2nd 2013, 2:09 pm

how to add like this one http://prntscr.com/286gig it appear only on bottom of the page and if i click on it i got to top of page

by mist3r0us_b0y December 2nd 2013, 2:14 pm

this tutorial will helps you

http://www.csshelp.net/t45-how-to-put-scroll-to-top-with-jquery-on-your-forum

by Jack Atlas December 2nd 2013, 2:42 pm

dont work

by mist3r0us_b0y December 2nd 2013, 3:23 pm

what version you using ?

by Jack Atlas December 2nd 2013, 3:47 pm

phpBB2 this one

by Jack Atlas December 3rd 2013, 1:29 pm

guys i need help no one answered

by Jack Atlas December 4th 2013, 3:05 pm

the 3 rd day and no answer

by ashik4u December 4th 2013, 3:21 pm

1. Go to Admin Panel>Display>Templates>general>overall_header

2. And add this code after <body> tag

Code:: <a style="position: fixed; bottom:5px;left:5px;" href="#" title="Back to Top"><img style="border: none;" src="https://cdn1.iconfinder.com/data/icons/tango/22x22/actions/go-top.png"/></a>

3. Save and publish the templates

by Jack Atlas December 5th 2013, 2:30 pm

what do you mean by <body> tag

by Legolas December 5th 2013, 7:49 pm

Hello,
Add this to your javascript codes and tick all pages:

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

Now, go to your CSS codes and add:

Code:: #dailytop{ 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; } #dailytop{ opacity : 0.9; }

Next, add this after your <body> tag into overall_header (templates), or for phpBB3 and Invision make a new global announcement with this code:

Code:: <div id="dailytop">^ Back to Top</div>

by **TheCrow** December 6th 2013, 1:40 am

Of course you can use the above solution, or you can simply add 1 or 2 arrows (one up and one down) as widgets and do the same thing!
Image of result:
how to add a thing that can make you go to top of page 7BJF6Mm

how to add a thing that can make you go to top of page 7BJF6Mm

by adding this in a new widget:

Code:: <div style="position:fixed; right:0.1%; bottom:45%;"> <div id="nav_up"><img src="http://i56.servimg.com/u/f56/18/45/97/69/up11.png" alt="Go Up" title="Go Up" border="0"></div> <div id="nav_down"><img src="http://i56.servimg.com/u/f56/18/45/97/69/down11.png" alt="Go Down" title="Go Down" 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>