fadeIn() doesn't work but fadeOut() is ok

Question

I want to add a fadeIn() and a fadeOut() to my scrollToTop but the fadeIn is'nt worked.

If you want ot see, I've created some GIF : First GIF Here

As you can see the fadeIn() on the scrollToTop button is triggered by the scroll of the windows,

This is my code :

$(document).ready(function() {
  //Check to see if the window is top if not then display button
  $('.modal-content').scroll(function() {
    if ($(this).scrollTop() > 100) {
      $(".scrollToTop").fadeIn(1000);
    } else {
      $('.scrollToTop').fadeOut(1000);
    }
  });

  //Click event to scroll to top
  $('.scrollToTop').click(function() {
    $('.modal-content').animate({
      scrollTop: 0
    }, 500);
    return false;
  });

});

<a id="up" class="scrollToTop" style="display:none;"><i class="fa fa-arrow-up" aria-hidden="true"></i></a>

Please check the guidance in "[mcve]". A minimal repro would make it a lot easier and pleasant to help. (Which also would make gifs from a domain like "gyazo.com" superfluous.) — Jeroen, Jun 15 '16 at 11:26

score 0 · Answer 1 · answered Jun 15 '16 at 11:28

I'm not an expert at jQuery, but it looks to me as though your problem resides in you invoking fadeIn nearly every time the page is scrolled. What I suggest is that you create a boolean, called buttonShowing (or whatever), and set it to false.

Then, change buttonShowing every time the user scrolls, at the end of the appropriate if and else statements. Then, at the beginning of the if/else statements, you can check if the buttonShowing state has changed and only fadeIn/Out if the state has changed since the last scroll event fired. Here is the code:

$(document).ready(function() {
  var buttonShowing = false;
  //Check to see if the window is top if not then display button
  $('.modal-content').scroll(function() {
    if ($(this).scrollTop() > 100) {
      if(!buttonShowing) $(".scrollToTop").fadeIn(1000);
      buttonShowing = true;
    } else {
      if(buttonShowing) $('.scrollToTop').fadeOut(1000);
      buttonShowing = false;
    }
  });

  //Click event to scroll to top
  $('.scrollToTop').click(function() {
    $('.modal-content').animate({
      scrollTop: 0
    }, 500);
    return false;
  });

});

You can use `.is(':animated')` rather than store your own bool. Might not be as efficient, but then should probably *debounce* the onscroll handler anyway. http://stackoverflow.com/a/725282/2181514 — freedomn-m, Jun 15 '16 at 11:37

Alisson Linneker · Answer 2 · 2016-06-15T12:06:59.433

Best Solution for you:

$(window).scroll(function() {
    var scroll_pos = window.pageYOffset;
    var scroll_div = $('.modal-content').offset().top;

    if(scroll_pos > scroll_div) {
        if ($(this).scrollTop() > 100)
            $(".scrollToTop").fadeIn(1000);
        else
            $('.scrollToTop').fadeOut(1000);
    }
});

or Change $('.modal-content').scroll(function() { to $(window).scroll(function() {. See:

$(document).ready(function() {
    //Check to see if the window is top if not then display button
    $(window).scroll(function() {
        if ($(this).scrollTop() > 100) {
            $(".scrollToTop").fadeIn(1000);
            } else {
            $('.scrollToTop').fadeOut(1000);
        }
    });

    //Click event to scroll to top
    $('.scrollToTop').click(function() {
        $('.modal-content').animate({
            scrollTop: 0
        }, 500);
        return false;
    });

});

I've tried your answer but it doesn't work, I think the "$(window).scroll(function() {" is not coreecte because I work in a modal. If you want to see all the code of my page (with the modal, I make an anwer with it) — Jerem, Jun 15 '16 at 12:23
@Jerem: Use the `Best Solution for you`. Work as desired in the scroll div. — Alisson Linneker, Jun 15 '16 at 16:12

Ehsan · Answer 3 · 2016-06-15T11:38:08.730

This example may help you. :

<html>
    <head>
        <style>
            body {
                height: 1200px;
            }
            div {
                width: 50px;
                height: 50px;
                background-color: red;
                border-radius: 100%;
                position: fixed;
                display: none;
            }
        </style>
    </head>
    <body>
        <div id="cir"></div>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
        <script>
            $(window).scroll(function(){
                if($(document).scrollTop()>100)
                    $("#cir").fadeIn(1000);
                else
                    $("#cir").fadeOut(800);
            })
        </script>
    </body>
</html>

score 0 · Answer 4 · answered Jun 15 '16 at 12:31

The solution with $(window).scroll(function() doesn't work, certainly beacause this script is used on a modal.

This is an of my HTML code with the modal :

<!-- Modal Structure -->
<div id="modal1" class="modal modal-fixed-footer">
    <div class="modal-content">
      <!-- My content -->
        <h4>Ajouter une recette</h4>
        <div class="row">
            <div class="input-field col s6 offset-s3">
                <input id="libelle" type="text" class="validate">
                <label for="libelle">Nom de la recette</label>
            </div>            
        </div>
        <form id="form_ingredient">
            <div class="row">
                <div class="col s4 offset-s1 input-field">
                    <input id="ingredient" name="ingredient" type="text" class="validate">
                    <label for="ingredient">Ingredient</label>
                </div>
                <div class="col s4 offset-s2 input-field">
                    <input id="poid" name="poid" type="number" class="validate">
                    <label for="poid">Poid</label>
                </div>
            </div>
            
        </form>
    </div>
    <div class="modal-footer" style="text-align: right;">
        <!-- My footer -->
        <a id="up" class="scrollToTop" style="display:none;"><i class="fa fa-arrow-up" aria-hidden="true"></i></a>
        <a id="add_ing"><i class="fa fa-plus" aria-hidden="true"></i></a>
        <a id="valid_ing" style="margin-left: 1.5%;"><i class="fa fa-check" aria-hidden="true"></i></a>
    </div>
</div>

<script>
//The script that I try to use
</script>

score 0 · Answer 5 · answered Jun 15 '16 at 13:23

I resolved my problem with Css, I just add these class to my stylesheet :

.scrollToTop{
opacity:0;
text-decoration: none;
transition:opacity 1s ease-in;
float: left; }

.scrollToTop.visible {
opacity:1; }

And this Js and that works :

 $('.modal-content').scroll(function(){

        if ($(this).scrollTop() > 100) {

                $(".scrollToTop").addClass('visible').css("cursor", "pointer");
        } else {
                $('.scrollToTop').removeClass('visible').css("cursor", "default");
        }
});

fadeIn() doesn't work but fadeOut() is ok

5 Answers5