1. You are viewing our forum as a guest. For full access please Register. WindowsBBS.com is completely free, paid for by advertisers and donations.

To the top or bottom

Discussion in 'Site Comments & Suggestions' started by MrBill, 2018/10/09.

  1. 2018/10/09
    MrBill

    MrBill SuperGeek WindowsBBS Team Member Thread Starter

    Joined:
    2006/01/14
    Messages:
    4,328
    Likes Received:
    270
    Sure do miss the arrows to go to the top or bottom wilhout scrolling. :p
     
  2. 2018/10/09
    PeteC

    PeteC SuperGeek Staff

    Joined:
    2002/05/10
    Messages:
    28,896
    Likes Received:
    389
    Me too :)
     
    MrBill likes this.

  3. to hide this advert.

  4. 2018/10/09
    Admin.

    Admin. Administrator Administrator Staff

    Joined:
    2001/12/30
    Messages:
    6,687
    Likes Received:
    107
    So that means you didn't select the "old" default style.... Do you like this style??
     
  5. 2018/10/09
    PeteC

    PeteC SuperGeek Staff

    Joined:
    2002/05/10
    Messages:
    28,896
    Likes Received:
    389
    This style is fine but for the absence of the top/bottom arrows. Think I will revert to the old style.
     
  6. 2018/10/09
    Admin.

    Admin. Administrator Administrator Staff

    Joined:
    2001/12/30
    Messages:
    6,687
    Likes Received:
    107
    I put the buttons on the new default style too now...
     
    MrBill likes this.
  7. 2018/10/09
    TonyT

    TonyT SuperGeek Staff

    Joined:
    2002/01/18
    Messages:
    9,072
    Likes Received:
    400
    I've used this on many sites I've developed. You can add a "back to top" arrow in the footer controlled by jQuery & CSS. This forum software imports the jQuery minimum libraries already.

    HTML:
    Code:
    <!-- scroll to top --><a href="#" class="topbutton"><i class="fa fa-arrow-circle-up" aria-hidden="true"></i></a><!-- #scroll to top -->
    Above uses a Font Awesome icon but an image icon can be used instead.

    CSS:
    Code:
    .topbutton {
    position: fixed;
    right: 10px;
    bottom: 200px;
    z-index: 1;
    display: none;
    }
    
    .topbutton .fa-arrow-circle-up {
    color: #c0c0c0;
    font-size: 50px;
    }
    
    jQuery code: (in header)
    Code:
    <script type="text/javascript">
    jQuery(document).ready(function($){
        var offset = 600; // number of pixels scrolled before button appears
        var speed = 700; // how fast the page scrolls
        var duration = 500; // fade speed
          $(window).scroll(function(){
                if ($(this).scrollTop() < offset) {
                    $('.topbutton') .fadeOut(duration);
                } else {
                    $('.topbutton') .fadeIn(duration);
                }
            });
       $('.topbutton').on('click', function(){
           $('html, body').animate({scrollTop:0}, speed);
           return false;
           });
    });
    </script>
    
     
  8. 2018/10/10
    MrBill

    MrBill SuperGeek WindowsBBS Team Member Thread Starter

    Joined:
    2006/01/14
    Messages:
    4,328
    Likes Received:
    270
    Good job. Proud of you.
     
    StiloKestrel likes this.

Share This Page

  1. This site uses cookies to help personalise content, tailor your experience and to keep you logged in if you register.
    By continuing to use this site, you are consenting to our use of cookies.