Jquery ScrollTop 到多个 ID + SetTimeout

Question

这是我的情况，我有一个页面，其中包含多个 div/id，是从 php while 循环创建的，基于文件夹中存在的 pdf 文件的数量。 我的目标是每 5 秒滚动到每个 ID，然后从头开始滚动。 下面的代码工作正常，但问题是如果我向文件夹添加 5 个新文件，那么我需要复制五倍的功能，我正在寻找的是滚动以找到文档上的所有可用 ID。 有没有办法写一个函数来做到这一点？ 任何灯将不胜感激。

这是我的实际代码：

$(document).ready(function () {

        function loopanchors() {

            setTimeout(function () {
                $('html, body').animate({
                    'scrollTop': $('#1').offset().top
                }, 2000);
            }, <?php echo $pdf_time; ?>);

            setTimeout(function () {
                $('html, body').animate({
                    'scrollTop': $('#2').offset().top
                }, 2000);
            }, <?php echo $pdf_time*2; ?>);

            setTimeout(function () {
                $('html, body').animate({
                    'scrollTop': $('#3').offset().top
                }, 2000);
            }, <?php echo $pdf_time*3; ?>);

            setTimeout(function () {
                $('html, body').animate({
                    'scrollTop': $('#4').offset().top
                }, 2000);
            }, <?php echo $pdf_time*4; ?>);

            setTimeout(function () {
                $('html, body').animate({
                    'scrollTop': $('#5').offset().top
                }, 2000);
            }, <?php echo $pdf_time*5; ?>);

            setTimeout(function () {
                $('html, body').animate({
                    'scrollTop': $('#6').offset().top
                }, 2000);
            }, <?php echo $pdf_time*6; ?>);

            setTimeout(function () {
                $('html, body').animate({
                    'scrollTop': $('#7').offset().top
                }, 2000);
            }, <?php echo $pdf_time*7; ?>);

            x = setTimeout(function () {
                loopanchors()
            }, <?php echo $pdf_time*8; ?>); //will loop every 5 seconds.
        }

        loopanchors(); //start it up the first time

    });

Answer 1

尝试使用此代码根据您的需要调整 $pdf_time 和 totalPDF：

<script>
  var totalPDF = 7;
  var currentPDF = 0;
  var loopInterval = <?php echo $pdf_time; ?>;
  $(function(){
    function loopanchors(){
      if(totalPDF <= currentPDF++){
        currentPDF = 1;
      }

      /* scroll to currentPDF */
      setTimeout(function(){
        console.log('scrolling to', currentPDF);
        try{
          $('html, body').animate({
            scrollTop: $('#' + currentPDF).offset().top
          },
          2000);
        }catch(e){
          console.log('element not found');
        }

        /* scroll next pdf */
        loopanchors();
      }, (loopInterval * currentPDF));
    }

    /*start it up the first time*/
    loopanchors();
  });
</script>