向下滚动只能在javascript中工作一次

Question

以下是向下滚动页面的javascript代码：

function down() { 
  var scrolled=0;
  scrolled=scrolled+1000;
  $("html, body").animate({scrollTop:  scrolled  },2500);
} 

它工作正常但它只能工作一次。如果我再次点击它将无法正常工作。只要我点击，我怎么能找到这样的工作方式呢？

任何帮助将不胜感激。

Answer 1

您正在使用常量（1000）来滚动页面。一旦你从顶部达到1000像素，告诉它再次滚动它将无能为力。

您是否尝试从您所在的任何地方滚动1000像素？为此，您需要使用滚动距离：

var scrolled = window.pageYOffset;

因为你使用jQuery，你也可以使用

$(window).scrollTop();

Answer 2

如果您在拨打down时无法滚动+ 1000px，请尝试以下操作：

var down = (function() { 
  var scrolled=0;

  return function() {
    scrolled += 1000;
    $("html, body").animate({scrollTop:  scrolled  },2500);
  }

})();

Answer 3

您总是滚动到相同的位置（1000）。只要您拨打down()，就可以将scrolled设置为0。

您需要在函数范围之外定义scrolled变量。

示例：

(function () {

    var scrolled = 0;

    function down() {
        scrolled=scrolled+1000;
        $("html, body").animate({scrollTop:  scrolled  },2500);
    }

    $('#scroll').click(down);

}());

（假设您应该触发滚动的按钮或链接元素具有ID scroll）