javascript - 为什么达到目标后倒数？

我希望有一个仅在屏幕上实际激活的计数器。我已经从发现的其他示例中设法做到了这一点。

HTML：

<div>Scroll Down</div>
<span class="count">200</span>

CSS：

div {
   height:800px;
   background:red;
}
h1 {
   display:none;
}

Javascript：

$(window).scroll(function() {
    var hT = $('#scroll-to').offset().top,
        hH = $('#scroll-to').outerHeight(),
        wH = $(window).height(),
        wS = $(this).scrollTop();
    console.log((hT - wH), wS);
    if (wS > (hT + hH - wH)) {
        $('.count').each(function() {
            $(this).prop('Counter', 0).animate({
                Counter: $(this).text()
            }, {
                duration: 4000,
                easing: 'swing',
                step: function(now) {
                    $(this).text(Math.ceil(now));
                }
            });
        });
    }
});

演示：

https://jsfiddle.net/76d57vjL/

问题是，它达到200，然后倒数至0，但我希望它保持在200。尽管如此，我似乎无法弄清楚到底是什么引起的。

最佳答案

问题是您要创建多个动画，因此在开始计数后返回到1，我用一个标志对其进行了修复，但是您可能可以制作一些高度来进行检查。

这是带有标志的解决方法：https://jsfiddle.net/uc0av8fh/

var flag = true;
$(window).scroll(function() {
$('#scroll-to');
   var hT = $('#scroll-to').offset().top,
       hH = $('#scroll-to').outerHeight(),
       wH = $(window).height(),
       wS = $(this).scrollTop();
    console.log((hT-wH) , wS);
   if (wS > (hT+hH-wH)){
    $('.count').each(function () {
      if(!flag) return;
      //console.log();
      flag = false;
      $(this).prop('Counter',0).animate({
          Counter: $(this).text()
      }, {
          duration: 4000,
          easing: 'swing',
          step: function (now) {
              $(this).text(Math.ceil(now));
              return 1;
          }
      });
    });
   }
});