Jump to content

Smooth scrolling with setTimeout


Guest

Recommended Posts

This works:

 

var startTime = 5000;
var timer1 = setTimeout("document.getElementById('features').scrollTop += 2;", startTime + 25);
var timer1 = setTimeout("document.getElementById('features').scrollTop += 3;", startTime + 50);
var timer1 = setTimeout("document.getElementById('features').scrollTop += 5;", startTime + 75);
var timer2 = setTimeout("document.getElementById('features').scrollTop += 10;", startTime + 100);
var timer3 = setTimeout("document.getElementById('features').scrollTop += 15;", startTime + 125);
var timer4 = setTimeout("document.getElementById('features').scrollTop += 20;", startTime + 150);
var timer4 = setTimeout("document.getElementById('features').scrollTop += 25;", startTime + 175);
var timer4 = setTimeout("document.getElementById('features').scrollTop += 30;", startTime + 200);
var timer4 = setTimeout("document.getElementById('features').scrollTop += 25;", startTime + 225);
var timer4 = setTimeout("document.getElementById('features').scrollTop += 20;", startTime + 250);
var timer5 = setTimeout("document.getElementById('features').scrollTop += 15;", startTime + 275);
var timer6 = setTimeout("document.getElementById('features').scrollTop += 10;", startTime + 300);
var timer7 = setTimeout("document.getElementById('features').scrollTop += 5;", startTime + 325);
var timer7 = setTimeout("document.getElementById('features').scrollTop += 3;", startTime + 350);
var timer7 = setTimeout("document.getElementById('features').scrollTop += 2;", startTime + 375);

 

But every time I try to put this into a loop, it breaks. How do I get this into a loop?

Link to comment
https://forums.phpfreaks.com/topic/227684-smooth-scrolling-with-settimeout/
Share on other sites

Ok, I figured it out:

 

var reset = setTimeout("scrollDown(document.getElementById('features').scrollTop);", 5000);
function scrollDown(scrollTop) {
  var i = 25;
  var j = 1;
  if (scrollTop == 380) {
    while (i <= 375) {
      var timer = setTimeout("document.getElementById('features').scrollTop -= " + j + ";", i);
      if (i <= 175) {
        j = j * 2;
      } else {
        j = j / 2;
      }
      i += 25;
    }
  } else {
    while (i <= 325) {
      var timer = setTimeout("document.getElementById('features').scrollTop += " + j + ";", i);
      if (i <= 150) {
        j = j * 2;
      } else {
        j = j / 2;
      }
      i += 25;
    }
  }
  var reset = setTimeout("scrollDown(document.getElementById('features').scrollTop);", 5000);
}

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.