Question

我想在我的scrollToTop中添加一个fadeIn（）和一个fadeOut（），但是fadeIn已经工作了。

如果你不想看，我已经创建了一些GIF：First GIF Here

正如您可以看到scrollToTop按钮上的fadeIn（）由窗户滚动触发，

这是我的代码：

$(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>

Answer 1

我不是jQuery的专家，但它看起来好像你的问题在于你几乎每次滚动页面时调用fadeIn。我建议你创建一个名为buttonShowing（或其他）的布尔值，并将其设置为false。

然后，每次用户滚动时，在相应的if和else语句的末尾更改buttonShowing。然后，在if / else语句的开头，您可以检查buttonShowing状态是否已更改，如果自上次滚动事件触发后状态已更改，则仅检查fadeIn / Out。这是代码：

$(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;
  });

});

Answer 2

最适合您的解决方案：

$(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);
    }
});

或将$('.modal-content').scroll(function() {更改为$(window).scroll(function() {。参见：

$(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;
    });

});

Answer 3

此示例可能对您有所帮助。：

<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>

Answer 4

使用$（window）.scroll（function（）的解决方案不起作用，当然因为此脚本用于模态。

这是我的HTML代码，包含模式：

<!-- 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>

Answer 5

我用Css解决了我的问题，我只是将这些类添加到我的样式表中：

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

.scrollToTop.visible {
opacity:1; }

这个Js和那个有效：

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

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

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

fadeIn（）不起作用，但fadeOut（）没问题

5 个答案: