Question

我有两个屏幕＆＃39;用不同的背景图片。

当用户点击向下箭头时，它会从一个屏幕上滚动＆＃39;到下面的一个。第二个屏幕设置为在开头显示无。这一切都按预期工作，但是，当尝试再次滚动到屏幕顶部时，它会跳到顶部而不是平滑地滚动到顶部。我也在使用GSAPs tween library来制作其他动画。

请参阅以下代码：

JS

 $('.down-arrow').click(function() {
    var tl = new TimelineMax();
    tl.set('.background-two', {display: 'block', onComplete: scrollDown})
    tl.set('.background-one', {display: 'none', delay: 0.6})

    function scrollDown(){
          $('html, body').animate({scrollTop: $(window).height()}, 600);
    }

  });


  $('.up-arrow').click(function() {
    var tl = new TimelineMax();
    tl.set('.background-one', {display: 'block', onComplete: scrollUp})
    tl.set('.background-two', {display: 'none', delay: 0.6})
    function scrollUp(){
          $('html, body').animate({scrollTop: 0}, 600);
    }
  });

CSS

.background-one {
    background: url(../img/Background1.png) no-repeat center;
    background-size: cover;
    height: 100%;
    width: 100%;
    position: relative;
}

.background-two {
    background: url(../img/Background2.png) no-repeat center;
    background-size: cover;
    height: 100%;
    width: 100%;
    position: relative;
}

HTML

<div class="background-one">
   <div class="up-arrow">UP</div>
</div>
<div class="background-two">
   <div class="down-arrow">DOWN</div>
</div>

Answer 1

我的猜测是，当您将顶部区域设置为display: block;时，它会立即显示并按下您的底部区块。

你可以尝试的是滑动块（通过设置动画高度而不是滚动）。

Answer 2

正确关闭html div-tags后它是否有效？

编辑：

我创建了一个fiddle，动画效果很好。您正在删除（display：none）另一个元素，这会导致页面闪烁/跳转。

function scrollDown(){
  $('html, body').animate({scrollTop: $(window).height()}, 600);
}
function scrollUp(){
  $('html, body').animate({scrollTop: 0}, 600);
}
$('.down-arrow').click(function() {
  var tl = new TimelineMax();
  tl.set('.background-two', {display: 'block', onComplete: scrollDown})
  tl.set('.background-one', {display: 'none', delay: 0.6})
  });


  $('.up-arrow').click(function() {
    var tl = new TimelineMax();
    tl.set('.background-one', {display: 'block', onComplete: scrollUp})
    tl.set('.background-two', {display: 'none', delay: 0.6})

  });

提示：将您的功能保留在点击处理程序之外。

防止跳回屏幕jQuery动画的顶部

2 个答案: