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,354
    Mentioned
    179 Post(s)
    Tagged
    9 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,630
    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,354
    Mentioned
    179 Post(s)
    Tagged
    9 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
  •