Javascript 如何使用scrollTop（）制作反向动画；

伙计们，我正在使用scrollTop（）为我网站的一部分制作动画，我想知道如果滚动到底部而不是顶部，是否可以反转动画

---

我正在搜索，但jquery中没有滚动底部。

要滚动到文档底部，请尝试：

function firstAnimation() {
  $('.etc(1)').fadeIn();
}
function secondAnimation() {
  $('.etc(1)').fadeOut();
  $('.etc(2)').fadeIn();
}

function thirdAnimation() {
  $('.etc(2)').fadeOut();
  $('.etc(3)').fadeIn();
}

function fourthAnimation() {
  $('.etc(3)').fadeOut();
  $('.etc(4)').fadeIn();
}


$(window).scroll(function() {
  if ($(this).scrollTop() > 150) {
    firstAnimation();
  }
  if ($(this).scrollTop() > 300) {
    secondAnimation();
  }
  if ($(this).scrollTop() > 450) {
    thirdAnimation();
  }
  if ($(this).scrollTop() > 600) {
    fourthAnimation();
  }

});

---

首先，为每个

if

语句设置附加要求，以将每个事件设置为滚动范围，以防止触发多个事件。其次，在下一个元素中添加一个

.fadeOut（）

函数，这样当用户反向滚动时，效果就会反转

代码应该如下所示：

$(window).load(function() {
  $("html, body").animate({ scrollTop: $(document).height() });
});

函数firstAnimation（）{
$（'.etc1'）.fadeIn（）；
$（'.etc2'）.fadeOut（）；
}
函数secondAnimation（）{
$（'.etc1'）.fadeOut（）；
$（'.etc2'）.fadeIn（）；
$（'.etc3'）.fadeOut（）；
}
函数thirdAnimation（）{
$（'.etc2'）.fadeOut（）；
$（'.etc3'）.fadeIn（）；
$（'.etc4'）.fadeOut（）；
}
函数fourthAnimation（）{
$（'.etc3'）.fadeOut（）；
$（'.etc4'）.fadeIn（）；
}
$（窗口）。滚动（函数（）{
如果（$（this.scrollTop（）>1500&$（this.scrollTop（）<3000）{
第一动画（）；
}
如果（$（this.scrollTop（）>3000&$（this.scrollTop（）<4500）{
第二动画（）；
}
如果（$（this.scrollTop（）>4500&$（this.scrollTop（）<6000）{
第三代化（）；
}
如果（$（this）.scrollTop（）>6000）{
fourthAnimation（）；
}
});

此文件可能重复

$(window).load(function() {
  $("html, body").animate({ scrollTop: $(document).height() });
});

function firstAnimation() {
  $('.etc1').fadeIn();
  $('.etc2').fadeOut();
}

function secondAnimation() {
  $('.etc1').fadeOut();
  $('.etc2').fadeIn();
  $('.etc3').fadeOut();
}

function thirdAnimation() {
  $('.etc2').fadeOut();
  $('.etc3').fadeIn();
  $('.etc4').fadeOut();
}

function fourthAnimation() {
  $('.etc3').fadeOut();
  $('.etc4').fadeIn();
}

$(window).scroll(function() {
  if ($(this).scrollTop() > 1500 && $(this).scrollTop() < 3000) {
    firstAnimation();
  }
  if ($(this).scrollTop() > 3000 && $(this).scrollTop() < 4500) {
    secondAnimation();
  }
  if ($(this).scrollTop() > 4500 && $(this).scrollTop() < 6000) {
    thirdAnimation();
  }
  if ($(this).scrollTop() > 6000) {
    fourthAnimation();
  }
});