如何使用scrollTop（）制作反向動畫；

Question

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

});

伙計們，我正在使用scrollTop（）為網站的一部分制作動畫，我想知道如果o滾動到底部而不是頂部，是否可以反轉動畫。

我正在搜索，但jquery中沒有scrollBottom。

Answer 1

要滾動到文檔底部，請嘗試：

$(window).scrollTop($(body).height());

Answer 2

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

Answer 3

首先，為每個if語句設置一個附加要求，以將每個事件的條件限制在滾動范圍內，以防止觸發多個事件。 其次， .fadeOut()一個元素添加.fadeOut()函數，以便當用戶向相反方向滾動時效果相反。

該代碼應如下所示：

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

JSFiddle上的演示