You are not connected. Please login or register

View previous topic View next topic Go down  Message [Page 1 of 1]

1 Back to Top on Thu Jun 21, 2012 3:47 pm

Verrell123 Admin

avatar

Back To Top

Go to the Admin CP => Display => Pictures and Colors > Colors > CSS Stylesheet

And put this code
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: 1000;
    right: 30px;
  background-color : #000;
  border-radius : 8px;
  -webkit-border-radius : 8px;
  -moz-border-radius : 8px;
}
#backtotop:hover {
  opacity  : 0.9;
}
You can change background-color or even add a image.

You can put this code in the templates or homepage message
Code:

<div id="backtotop">Back to Top</div>

If you use PunBB or PhpBB2 you can put the HTML code in the Templates overall_footer_end.

The completed Code:
Code:
<style>
#backtotop {
    bottom: 50px;
    color: #FFFFFF;
    cursor: pointer;
    display: none;
    font-size: 14px;
    opacity: 0.6;
    padding: 8px;
    position: fixed;
    text-align: center;
    z-index: 1000;
    right: 30px;
  background-color : #000;
  border-radius : 8px;
  -webkit-border-radius : 8px;
  -moz-border-radius : 8px;
}
#backtotop:hover {
  opacity  : 0.9;
}
</style><div id="backtotop">Back to Top</div>

Second
Go to the Administration Panel => Modules => HTML & JAVASCRIPT => Javascript codes management

Create a new javascript and paste this code:
Code:
$(function() {
  $(window).scroll(function() {
      if($(this).scrollTop() != 0) {
        $('#backtotop').fadeIn(); 
      } else {
        $('#backtotop').fadeOut();
      }
  });
 
  $('#backtotop').click(function() {
      $('body,html').animate({scrollTop:0},800);
  }); 
});
Check list on all page



Last edited by Verrell123 on Fri Jul 13, 2012 7:53 am; edited 3 times in total

View user profile http://forum.verrell123.co.cc/

2 Re: Back to Top on Fri Jun 22, 2012 9:24 am

Really nice tutorial! Thank you Very Happy

View user profile http://freshartz2.indonesianforum.net/

3 Re: Back to Top on Mon Jul 02, 2012 10:10 am

Awesome thx for sharing Very Happy

View user profile

4 Re: Back to Top on Mon Jul 02, 2012 11:16 am

+1 Like Very Happy

View user profile

5 Re: Back to Top on Sun Jul 08, 2012 9:06 pm

Verrell, you can't write "copyright Freshartz" as this is not your own work Sad
You have to post the authorization of the creator...

View user profile

6 Re: Back to Top on Sun Jul 08, 2012 9:11 pm

Verrell123 Admin

avatar
Niko! wrote:Verrell, you can't write "copyright Freshartz" as this is not your own work Sad
You have to post the authorization of the creator...
Well, i forgot where i got this tutorials Shocked

View user profile http://forum.verrell123.co.cc/

7 Re: Back to Top on Mon Oct 15, 2012 7:22 pm

thenx..

View user profile

Sponsored content

View previous topic View next topic Back to top  Message [Page 1 of 1]

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

 


Sitemap
FreshArtz
FreshArtz © 2012
Design by Verrell123
Donate
Demo Page

About
We are Web Design and Coding forum, we will help member how to coding and design website, there many category about web design and coding.