SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Member
    Join Date
    Jul 2013
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Angry *Help needed* Fade in 'Back to top' fixed bar when user scrolls then fade-out

    Hi there,
    I need some help. I'm trying to get my fixed footer-style back-to-top bar to fade-in once the user scrolls beyond a certain point, this is what i've got so far but it won't work.
    Any idea way.


    CSS:
    #fixed-backtotop{
    position:fixed;
    padding:10px;
    left:0px;
    bottom:0px;
    width:100%;
    background-color:#5A9BE0;}


    <script>

    $(document).ready(function(){
    //Check to see if the window is top if not then display button
    $(window).scroll(function(){
    if ($(this).scrollTop() > 100) {
    $('#fixed-backtotop').fadeIn();
    } else {
    $('#fixed-backtotop').fadeOut();
    }
    });
    </script>



    </div>
    <div id="fixed-backtotop">
    <a class="btt" href="#" onclick="return false;" onclick="return false;" onmousedown="resetScroller('header');">Back to Top</a>
    </div>


    To clarify, i have to scroll to the top of the page working, however i only want the div to appear once the user scrolls beyond say 100px.

  2. #2
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,938
    Mentioned
    214 Post(s)
    Tagged
    12 Thread(s)
    Hi,

    Welcome to the forums

    At first glance, it seems that the fadeIn code is firing again and again when the user scrolls.

    Try adding a check to see if the element is already visible, before attempting to fade it in:

    Code JavaScript:
    $(window).scroll(function(){
      if ($(this).scrollTop() >= 100 && !$('#fixed-backtotop').is(":visible")) {
        $('#fixed-backtotop').fadeIn();
      } elsif ($(this).scrollTop() < 100 && $('#fixed-backtotop').is(":visible")){
        $('#fixed-backtotop').fadeOut();
      }
    });

    If that doesn't work (untested), please post a link to a page where I can see this not working.

  3. #3
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,656
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)

  4. #4
    SitePoint Member
    Join Date
    Jul 2013
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks @PicnicTutorials & @Pullo,
    I managed to get Picnictutorials solution working however, i would love your help with the code. I'm a complete javascript novice.
    So the code i used integrated the scroll back to top, however i already have this sorted. So i'd like to remove that piece of code however i don't know much about the syntax.

    "$(function(){$(window).scroll(function(){if($(this).scrollTop()>100){$("#fixed-backtotop").fadeIn(1000)}else{$("#fixed-backtotop").fadeOut(750)}})};$("#fixed-backtotop").click(function(){$("html, body").animate({scrollTop:0},600);return false})});"


    i want to remove the
    "$("#fixed-backtotop").click(function(){$("html, body").animate({scrollTop:0},600);return false"

    However i can't get the syntax right, can anyone help ?

  5. #5
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,938
    Mentioned
    214 Post(s)
    Tagged
    12 Thread(s)
    Hi,

    Like this?

    Code JavaScript:
    $(function(){
      $(window).scroll(function(){
        if($(this).scrollTop()>100){
          $("#fixed-backtotop").fadeIn(1000)
        }else{
          $("#fixed-backtotop").fadeOut(750)
        }
      })
    });


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •