滚动表从顶部到底部，然后备份（并重复）

Question

I have a code that on button press runs autoscroll on a single table but I need an option to Scroll Page from Top to Bottom, then Back Up (and Repeat), please check the code of my autoscroll option and what should I change or insert to enable this option?

Please check this script table on this host to see working process: (just upload any SRT subtitles file and click button "auto scroll") Click Here to check it

 ini_set('MAX_EXECUTION_TIME', -1);

 define('SRT_STATE_SUBNUMBER', 0);
 define('SRT_STATE_TIME',      1);
 define('SRT_STATE_TEXT',      2);
 define('SRT_STATE_BLANK',     3);

 $lines   = file("uploads/".$file_name);

 $subs    = array();
 $state   = SRT_STATE_SUBNUMBER;
 $subNum  = 0;
 $subText = '';
 $subTime = '';

 foreach($lines as $line) {
     switch($state) {
         case SRT_STATE_SUBNUMBER:
             $subNum = trim($line);
             $state  = SRT_STATE_TIME;
             break;

         case SRT_STATE_TIME:
             $subTime = trim($line);
             $state   = SRT_STATE_TEXT;
             break;

         case SRT_STATE_TEXT:
             if (trim($line) == '') {
                 $sub = new stdClass;
                 $sub->number = $subNum;
                 list($sub->startTime, $sub->stopTime) = explode(' --> ', $subTime);
                 $sub->text   = $subText;
                 $subText     = '';
                 $state       = SRT_STATE_SUBNUMBER;

                 $subs[]      = $sub;
             } else {
                 $subText .= $line;
             }
             break;
     }
 }

 if ($state == SRT_STATE_TEXT) {
     // if file was missing the trailing newlines, we'll be in this
     // state here.  Append the last read text and add the last sub.
     $sub->text = $subText;
     $subs[] = $sub;
 }
 ?>
document.getElementById('table').style.display = 'block';

function autoScroll() {
  window.scrollBy(0, 400)
  var objDiv = document.getElementById("table");
  smooth_scroll_to(objDiv, objDiv.scrollHeight, 15900);
}

var smooth_scroll_to = function(element, target, duration) {
  target = Math.round(target);
  duration = Math.round(duration);
  if (duration < 0) {
    return Promise.reject("bad duration");
  }
  if (duration === 0) {
    element.scrollTop = target;
    return Promise.resolve();
  }

  var start_time = Date.now();
  var end_time = start_time + duration;

  var start_top = element.scrollTop;
  var distance = target - start_top;

  var smooth_step = function(start, end, point) {
    if (point <= start) {
      return 0;
    }
    if (point >= end) {
      return 1;
    }
    var x = (point - start) / (end - start);
    return x * x * (3 - 2 * x);
  }

  return new Promise(function(resolve, reject) {
    var previous_top = element.scrollTop;

    var scroll_frame = function() {
      if (element.scrollTop != previous_top) {
        reject("interrupted");
        return;
      }

      var now = Date.now();
      var point = smooth_step(start_time, end_time, now);
      var frameTop = Math.round(start_top + (distance * point));
      element.scrollTop = frameTop;

      if (now >= end_time) {
        resolve();
        return;
      }

      if (element.scrollTop === previous_top &&
        element.scrollTop !== frameTop) {
        resolve();
        return;
      }
      previous_top = element.scrollTop;

      setTimeout(scroll_frame, 0);
    }
    setTimeout(scroll_frame, 0);
  });
}

Answer 1

Consider an alternative code:

 $(function() { var intvl; var tm = 15900; function scrollDownTo(p, ms, cb) { console.log("Scrolling Down to " + p + " in " + ms + " ms"); $("html, body").animate({ scrollTop: p }, ms, cb); } function scrollUpTo(p, ms, cb) { console.log("Scrolling Up to " + p + " in " + ms + " ms"); $("html, body").animate({ scrollTop: p }, ms, cb); } function autoScroll() { window.scrollBy(0, 400) var objDiv = $("table"); if (objDiv.data("dir") == undefined) { objDiv.data("dir", 1); objDiv.data("action", "none"); } $(window).scrollTop(objDiv.offset().top); if (objDiv.data("dir") == 1) { objDiv.data("action", "scroll"); var t = objDiv.offset().top; var b = objDiv.offset().top + objDiv.height(); scrollDownTo(b, tm, function() { console.log("Scroll Down Complete."); scrollUpTo(t, tm, function() { objDiv.data("action", "none"); console.log("Scroll Up Complete."); }); }); } } autoScroll(); var c = 0; intvl = setInterval(function() { if ($("table").data("action") == "none") { autoScroll(); } if (c++ >= 30) { clearInterval(intvl); } }, 1000); }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <table cellpadding="1" cellspacing="1"> <tr> <th>Name</th> <th>E-Mail</th> <th>Company</th> <th>Address</th> </tr> <tr> <td>Harper</td> <td>congue@natoquepenatibus.ca</td> <td>Id Mollis LLC</td> <td>7335 Molestie Street</td> </tr> <tr> <td>Axel</td> <td>orci.luctus@atlacus.edu</td> <td>Hymenaeos Mauris Inc.</td> <td>787-1741 Nec Ave</td> </tr> <tr> <td>Candace</td> <td>leo.Morbi.neque@Duis.edu</td> <td>At Ltd</td> <td>232-6504 Quis Ave</td> </tr> <tr> <td>Diana</td> <td>eu.odio.tristique@Duisrisusodio.edu</td> <td>Nec Limited</td> <td>5691 Eu, Avenue</td> </tr> <tr> <td>Daniel</td> <td>ante.bibendum.ullamcorper@Nuncut.net</td> <td>Turpis Egestas Corporation</td> <td>PO Box 970, 9130 Feugiat Avenue</td> </tr> <tr> <td>Nissim</td> <td>pharetra@nuncestmollis.net</td> <td>Semper Limited</td> <td>PO Box 330, 8779 Ultricies Ave</td> </tr> <tr> <td>Velma</td> <td>Cras@mollisduiin.net</td> <td>Hendrerit Neque In Ltd</td> <td>985-9826 Viverra. Road</td> </tr> <tr> <td>Denise</td> <td>vel.mauris.Integer@risusDonec.edu</td> <td>Vitae Posuere LLP</td> <td>696-1565 Tincidunt Ave</td> </tr> <tr> <td>Geoffrey</td> <td>dolor@estNuncullamcorper.ca</td> <td>Hendrerit Neque In PC</td> <td>1862 Tempus St.</td> </tr> <tr> <td>Sophia</td> <td>eleifend@estmollisnon.co.uk</td> <td>Id Ante Dictum LLP</td> <td>8063 Massa Rd.</td> </tr> <tr> <td>Talon</td> <td>eget.volutpat@sitamet.edu</td> <td>Tincidunt Donec Corp.</td> <td>Ap #958-6983 In, St.</td> </tr> <tr> <td>Alma</td> <td>fermentum.arcu@tristiquenequevenenatis.co.uk</td> <td>Sagittis Lobortis Mauris Company</td> <td>999-6082 Eleifend St.</td> </tr> <tr> <td>Yuli</td> <td>suscipit.nonummy.Fusce@Proinvelarcu.co.uk</td> <td>Ligula Aliquam Company</td> <td>8939 Molestie Avenue</td> </tr> <tr> <td>Susan</td> <td>Integer.in.magna@Uttinciduntvehicula.org</td> <td>Dictum Magna Incorporated</td> <td>PO Box 405, 3923 Eros Rd.</td> </tr> <tr> <td>Rogan</td> <td>ut.pellentesque.eget@cursusnon.org</td> <td>Iaculis Corporation</td> <td>3745 Cursus Street</td> </tr> <tr> <td>Malcolm</td> <td>Donec@laciniaSed.edu</td> <td>Et Netus LLP</td> <td>8816 Fringilla St.</td> </tr> <tr> <td>Xena</td> <td>pede@scelerisquesed.net</td> <td>Congue A Aliquet Institute</td> <td>652-5287 Lectus, Av.</td> </tr> <tr> <td>Shaeleigh</td> <td>Curae@liberoDonec.co.uk</td> <td>Nullam Suscipit Limited</td> <td>PO Box 106, 3607 Dolor Street</td> </tr> <tr> <td>Ori</td> <td>elit.Nulla.facilisi@variusorci.co.uk</td> <td>Nunc Sit Limited</td> <td>146-7683 Dolor Street</td> </tr> <tr> <td>Wanda</td> <td>Mauris.nulla@magnaCras.edu</td> <td>Erat Corp.</td> <td>2267 Pellentesque St.</td> </tr> <tr> <td>Nicholas</td> <td>egestas.a.dui@egetmetus.org</td> <td>Ipsum Curabitur Consequat Incorporated</td> <td>4770 Quam Av.</td> </tr> <tr> <td>Zenia</td> <td>Vestibulum@taciti.ca</td> <td>Elit Institute</td> <td>2747 Ac Road</td> </tr> <tr> <td>Georgia</td> <td>eleifend@acturpisegestas.edu</td> <td>Lorem Vehicula Incorporated</td> <td>436-3813 Nisl Street</td> </tr> <tr> <td>Hop</td> <td>interdum.feugiat@consectetueradipiscing.com</td> <td>Nulla Incorporated</td> <td>6479 Cursus. St.</td> </tr> <tr> <td>Luke</td> <td>gravida.mauris@nonsollicitudin.com</td> <td>Nulla LLP</td> <td>165-3516 Porta Road</td> </tr> <tr> <td>Allegra</td> <td>elementum.lorem@anunc.ca</td> <td>Penatibus Et Magnis LLP</td> <td>719-2047 Sociis Street</td> </tr> <tr> <td>Chantale</td> <td>turpis.Aliquam@quislectusNullam.com</td> <td>Justo Praesent Luctus Corp.</td> <td>Ap #834-7566 Erat Ave</td> </tr> <tr> <td>Mira</td> <td>malesuada@a.com</td> <td>Arcu LLP</td> <td>7169 Mi Av.</td> </tr> <tr> <td>Nyssa</td> <td>Aenean@convallis.ca</td> <td>Varius Nam Porttitor Institute</td> <td>838-5375 Velit St.</td> </tr> <tr> <td>Mona</td> <td>a.malesuada@purusDuis.net</td> <td>Quam Pellentesque Habitant Industries</td> <td>PO Box 649, 2025 Vulputate Rd.</td> </tr> <tr> <td>Tiger</td> <td>nec.tempus.scelerisque@dapibus.com</td> <td>Vel Arcu Eu Foundation</td> <td>PO Box 689, 1544 Nec Av.</td> </tr> <tr> <td>Latifah</td> <td>mi.ac.mattis@maurisidsapien.co.uk</td> <td>Sit Amet Luctus Incorporated</td> <td>PO Box 123, 6415 Diam. Rd.</td> </tr> <tr> <td>Raja</td> <td>Sed.congue.elit@eu.ca</td> <td>Orci Phasellus Dapibus Corporation</td> <td>PO Box 521, 8717 Ultrices Street</td> </tr> <tr> <td>Hashim</td> <td>est.vitae@euelitNulla.edu</td> <td>Felis Inc.</td> <td>2451 Semper Av.</td> </tr> <tr> <td>Upton</td> <td>Morbi.neque.tellus@molestie.org</td> <td>Orci Donec Nibh Inc.</td> <td>647-1389 Metus Rd.</td> </tr> <tr> <td>Dai</td> <td>ac@lectusrutrumurna.com</td> <td>Fusce Diam Nunc Company</td> <td>PO Box 311, 6508 Nulla. Ave</td> </tr> <tr> <td>Sopoline</td> <td>Nulla.dignissim@purusMaecenas.net</td> <td>Pede Blandit Corp.</td> <td>PO Box 316, 4463 Vestibulum St.</td> </tr> <tr> <td>Brandon</td> <td>vestibulum.massa@sapien.com</td> <td>Non Dui Nec Corp.</td> <td>Ap #718-9013 Phasellus Ave</td> </tr> <tr> <td>Jeanette</td> <td>pretium.et@venenatisvelfaucibus.co.uk</td> <td>Suscipit Est Ac LLP</td> <td>9525 Enim, Road</td> </tr> <tr> <td>MacKenzie</td> <td>eget.nisi.dictum@iaculisodioNam.org</td> <td>Rutrum Eu PC</td> <td>547-9096 Velit Rd.</td> </tr> <tr> <td>James</td> <td>luctus@temporaugue.edu</td> <td>Sed Company</td> <td>710-8341 Urna. Rd.</td> </tr> <tr> <td>Clio</td> <td>vitae.risus@urnaUt.com</td> <td>Magna Nec Quam Consulting</td> <td>591-6993 Scelerisque Street</td> </tr> <tr> <td>Keefe</td> <td>Nulla@enimEtiamgravida.org</td> <td>Suspendisse Corp.</td> <td>Ap #264-221 Amet St.</td> </tr> <tr> <td>Andrew</td> <td>metus.vitae@facilisis.net</td> <td>At Augue Ltd</td> <td>527-740 Blandit St.</td> </tr> <tr> <td>Duncan</td> <td>Donec.tempor.est@dignissimMaecenas.com</td> <td>Vitae PC</td> <td>646-1450 Lorem Road</td> </tr> <tr> <td>Abraham</td> <td>neque.Sed@necurnaet.ca</td> <td>Nibh Enim Gravida Foundation</td> <td>4673 Nunc St.</td> </tr> <tr> <td>Meredith</td> <td>arcu.Aliquam.ultrices@famesac.edu</td> <td>Elementum Sem PC</td> <td>PO Box 624, 8888 Augue Ave</td> </tr> <tr> <td>Patience</td> <td>Aenean.euismod@fermentumrisusat.com</td> <td>Dapibus Gravida Aliquam Consulting</td> <td>PO Box 421, 2581 Id Street</td> </tr> <tr> <td>Hoyt</td> <td>nisi.Cum.sociis@etnetus.edu</td> <td>Metus Sit Corp.</td> <td>Ap #767-2231 Sit Street</td> </tr> <tr> <td>Haviva</td> <td>quis.massa@ligulaNullamenim.co.uk</td> <td>Auctor Ullamcorper Nisl Corporation</td> <td>Ap #637-942 Nullam Ave</td> </tr> <tr> <td>Rigel</td> <td>dolor.Donec@necdiam.org</td> <td>Et Libero Proin Inc.</td> <td>3517 Ullamcorper. Rd.</td> </tr> <tr> <td>Len</td> <td>nisi@inhendreritconsectetuer.org</td> <td>Nisl Nulla Eu Consulting</td> <td>298-1354 Ullamcorper, Road</td> </tr> <tr> <td>August</td> <td>quis.arcu.vel@dapibusrutrumjusto.com</td> <td>Eu Enim Incorporated</td> <td>PO Box 693, 7557 Aenean Avenue</td> </tr> <tr> <td>Boris</td> <td>purus.Duis@acurna.edu</td> <td>Nunc In At Corp.</td> <td>PO Box 550, 1909 Tristique Street</td> </tr> <tr> <td>Abigail</td> <td>bibendum.ullamcorper@metusfacilisislorem.edu</td> <td>Eu LLP</td> <td>713-4207 Sed St.</td> </tr> <tr> <td>Unity</td> <td>malesuada.malesuada@risus.co.uk</td> <td>Morbi LLC</td> <td>572-4709 Ipsum Av.</td> </tr> <tr> <td>Yuli</td> <td>adipiscing.lacus.Ut@nequeNullam.ca</td> <td>Integer Mollis LLP</td> <td>PO Box 410, 8948 Nunc. St.</td> </tr> <tr> <td>Brittany</td> <td>tristique@egestaslacinia.edu</td> <td>Libero Associates</td> <td>399-9226 Ac St.</td> </tr> <tr> <td>Risa</td> <td>nunc.nulla@consectetueradipiscingelit.co.uk</td> <td>Nam Inc.</td> <td>198-1208 Commodo Rd.</td> </tr> <tr> <td>Kieran</td> <td>et.magnis@dolor.org</td> <td>Leo Cras Foundation</td> <td>705-349 Orci Av.</td> </tr> <tr> <td>Donovan</td> <td>turpis.vitae.purus@infaucibus.ca</td> <td>Montes Nascetur Ridiculus Ltd</td> <td>3781 Risus. St.</td> </tr> <tr> <td>Leilani</td> <td>sit.amet.risus@commodo.ca</td> <td>Vitae Corp.</td> <td>231-5948 Cursus. Ave</td> </tr> <tr> <td>Sonya</td> <td>est.Mauris@velitAliquamnisl.ca</td> <td>Mauris Consulting</td> <td>Ap #668-8080 Nam Avenue</td> </tr> <tr> <td>Hayes</td> <td>eget@luctus.ca</td> <td>Aliquam Company</td> <td>Ap #519-7064 Vel Street</td> </tr> <tr> <td>Erica</td> <td>erat.Vivamus.nisi@ligulaDonecluctus.com</td> <td>Lorem Ipsum Associates</td> <td>Ap #702-8217 Erat Road</td> </tr> <tr> <td>Price</td> <td>mattis@ipsum.com</td> <td>Sed Dolor Fusce PC</td> <td>327 Malesuada Avenue</td> </tr> <tr> <td>Christine</td> <td>vulputate.nisi.sem@Namnulla.ca</td> <td>Faucibus Leo In Industries</td> <td>4782 Diam. Street</td> </tr> <tr> <td>Katell</td> <td>Praesent@disparturientmontes.edu</td> <td>Consectetuer Adipiscing Elit PC</td> <td>8264 Curabitur Avenue</td> </tr> <tr> <td>Zelenia</td> <td>Duis@nonfeugiat.com</td> <td>Nulla Donec Non Inc.</td> <td>993-9667 Semper Avenue</td> </tr> <tr> <td>Jonah</td> <td>augue.eu.tellus@arcuetpede.org</td> <td>Gravida Sagittis Duis Industries</td> <td>476-6694 Pharetra Avenue</td> </tr> <tr> <td>Lyle</td> <td>eu@ullamcorper.co.uk</td> <td>Diam Nunc Consulting</td> <td>Ap #671-9373 Ultrices, Avenue</td> </tr> <tr> <td>Mannix</td> <td>Cras@magnisdis.com</td> <td>Ut Dolor Dapibus LLC</td> <td>PO Box 379, 7246 Rhoncus. Rd.</td> </tr> <tr> <td>Leila</td> <td>senectus.et@idblandit.co.uk</td> <td>Sed Limited</td> <td>4394 Integer St.</td> </tr> <tr> <td>Phelan</td> <td>ultrices.a@auctorodioa.net</td> <td>Aliquam PC</td> <td>3273 Nulla Av.</td> </tr> <tr> <td>Velma</td> <td>sociis.natoque@Suspendissetristiqueneque.co.uk</td> <td>Ac Ipsum Consulting</td> <td>PO Box 437, 3652 Ullamcorper. Rd.</td> </tr> <tr> <td>Ashely</td> <td>ac@leoelementumsem.com</td> <td>Enim Limited</td> <td>563-2520 Eu Rd.</td> </tr> <tr> <td>Adria</td> <td>Cras.convallis.convallis@Integertinciduntaliquam.ca</td> <td>Nunc Laoreet Lectus LLP</td> <td>PO Box 632, 8503 Nam St.</td> </tr> <tr> <td>Herrod</td> <td>lorem@hendreritnequeIn.net</td> <td>Orci Phasellus Dapibus Associates</td> <td>848-1593 Mauris Street</td> </tr> <tr> <td>Todd</td> <td>tellus.imperdiet.non@arcuimperdietullamcorper.co.uk</td> <td>Dui Quis LLP</td> <td>PO Box 371, 5356 Cum St.</td> </tr> <tr> <td>Rhona</td> <td>scelerisque.mollis.Phasellus@sapiengravidanon.edu</td> <td>Tortor Institute</td> <td>Ap #357-7299 Luctus. Road</td> </tr> <tr> <td>Ali</td> <td>Fusce.dolor.quam@eu.com</td> <td>Adipiscing Non Luctus Industries</td> <td>Ap #185-4416 Donec Street</td> </tr> <tr> <td>Fallon</td> <td>scelerisque@maurisutmi.net</td> <td>Dolor Tempus Non Inc.</td> <td>PO Box 881, 4626 Dolor Avenue</td> </tr> <tr> <td>Keegan</td> <td>Praesent.interdum@laciniaorci.edu</td> <td>Quis Arcu Company</td> <td>PO Box 125, 1827 Erat, Av.</td> </tr> <tr> <td>Irene</td> <td>consequat@tempus.co.uk</td> <td>Nulla Incorporated</td> <td>823-2595 Netus Ave</td> </tr> <tr> <td>Kato</td> <td>Aliquam.gravida.mauris@Sed.net</td> <td>Semper Pretium Neque Ltd</td> <td>7649 Nascetur Road</td> </tr> <tr> <td>Basia</td> <td>libero.est@sodalesMauris.co.uk</td> <td>Ultrices A Auctor Ltd</td> <td>PO Box 257, 5567 Tortor, St.</td> </tr> <tr> <td>Neil</td> <td>cursus.luctus.ipsum@temporarcu.net</td> <td>Tincidunt Tempus Inc.</td> <td>405-8028 Arcu Road</td> </tr> <tr> <td>Kerry</td> <td>mattis.Integer@vitae.org</td> <td>Parturient Ltd</td> <td>933-3617 Morbi Road</td> </tr> <tr> <td>Lamar</td> <td>ullamcorper.viverra@ipsum.net</td> <td>Ante Blandit Company</td> <td>473-9087 Auctor Rd.</td> </tr> <tr> <td>Gretchen</td> <td>vel.arcu@sed.net</td> <td>Sed Congue LLC</td> <td>9862 Sed Road</td> </tr> <tr> <td>Maile</td> <td>ullamcorper.eu@lectus.edu</td> <td>Morbi Vehicula Pellentesque Consulting</td> <td>620-2170 Egestas Av.</td> </tr> <tr> <td>Jolie</td> <td>Fusce.feugiat.Lorem@erosNam.ca</td> <td>Et Magnis Dis Inc.</td> <td>Ap #620-8133 Tristique Rd.</td> </tr> <tr> <td>Patience</td> <td>amet@hymenaeos.net</td> <td>Pede Sagittis Augue Corp.</td> <td>PO Box 506, 9817 Tempus Rd.</td> </tr> <tr> <td>Zeus</td> <td>enim@nec.org</td> <td>Nulla Cras Eu Ltd</td> <td>PO Box 866, 3866 Tellus Rd.</td> </tr> <tr> <td>Giselle</td> <td>sit.amet.dapibus@cursusin.net</td> <td>Suspendisse LLC</td> <td>PO Box 891, 1249 Velit St.</td> </tr> <tr> <td>Uta</td> <td>fames.ac@amet.co.uk</td> <td>Ultricies Ltd</td> <td>460-8906 Molestie Ave</td> </tr> <tr> <td>Orlando</td> <td>In.ornare.sagittis@nec.edu</td> <td>Imperdiet Erat Foundation</td> <td>997-4156 Mauris Street</td> </tr> <tr> <td>Demetrius</td> <td>et@idante.edu</td> <td>Neque Non Corporation</td> <td>822-8359 Amet Ave</td> </tr> <tr> <td>Allegra</td> <td>lorem.semper@aliquet.co.uk</td> <td>Nunc Quisque Limited</td> <td>Ap #509-6316 Auctor Rd.</td> </tr> <tr> <td>Adrienne</td> <td>metus.In@pellentesquemassa.ca</td> <td>Augue Ut Lacus Industries</td> <td>PO Box 168, 5359 Dolor Rd.</td> </tr> </table> 

This makes use of .animate() to scroll down and then cascade a scroll up. It then uses setInterval to restart the job for a specific number of times.

Hope this helps.