Jquery ScrollTop将ID + SetTimeout倍增 [英] Jquery ScrollTop to multiples ID + SetTimeout

问题描述

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

This is my case, i have a page with mutiples div/id created from a php while loop, based on the amount of pdf files that exists on a folder. My goal is to scroll to each one of the IDs each 5 secs and then restart the scrolling from the beginning. The following code work ok, but the problem is that if i add 5 new files to the folder then i would need to copy five times the function and what i am looking for is to scroll in order to all the available IDs on the document. There is any way to write a function to do this? Any lights will be appreciated.

这是我的实际代码：

$(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

    });

推荐答案

试试此代码调整$ pdf_time& totalPDF根据您的需要：

Try this code adjust $pdf_time & totalPDF as per your need:

<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>

这篇关于Jquery ScrollTop将ID + SetTimeout倍增的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！