You are not connected. Please login or register

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

ADMIN

1Accept Back to Top on Thu May 10, 2012 7:39 am

  • Verrell123 ADMIN

    avatar

    CreativeDesignz
    Web Design and Coding
    First
    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
    DEMO: LINK

    Notice : This tutorial is copyrighted by CreativeDesignz. You may not publish it on anywhere without written permission from the administrators.



    Last edited by Verrell123 on Wed Jun 13, 2012 10:35 am; edited 3 times in total



    Verrell123

    Creative Designz
    Design Your Life
    View user profile http://verrell123.co.cc/

    2Accept Re: Back to Top on Mon May 21, 2012 6:28 pm

  • L PROMEGA

    avatar
    Nice tutorials Very Happy

    View user profile

    3Accept Re: Back to Top on Tue May 22, 2012 8:35 am

  • Thanks for share this Laughing

    View user profile

    4Accept Re: Back to Top on Tue May 22, 2012 9:31 am

  • +1 Wink

    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