Scrolling | JavaScript | Cheatsheet¶

window.scrollTo(0, document.body.scrollHeight);

window.scrollTo(0, 0);

window.scrollTo(0, window.pageXOffset);

window.scrollTo(document.body.scrollWidth, window.pageYOffset);

window.scrollTo({
  top: document.body.scrollHeight,
  behavior: 'smooth'
});

const superScroll = (scrollStep = 50, scrollSpeed = 5) => setInterval(() => (document.documentElement.scrollTop += scrollStep) >= document.documentElement.scrollHeight && clearInterval(scrollInterval), scrollSpeed);

superScroll();

const superScroll = (scrollStep = 200, scrollSpeed = 10) => setInterval(() => (document.documentElement.scrollTop += scrollStep) >= document.documentElement.scrollHeight && clearInterval(scrollInterval), scrollSpeed);

superScroll();

const superScroll = (scrollStep = 5000, scrollSpeed = 5) => { const scrollToBottom = () => { document.documentElement.scrollTop += scrollStep; if (document.documentElement.scrollTop < document.documentElement.scrollHeight) requestAnimationFrame(scrollToBottom); }; scrollToBottom(); };

superScroll();

````

### Autoscroll to Bottom with Timeout

```javascript
function autoScrollToBottom() {
  window.scrollTo(0, document.body.scrollHeight);
}

var scrollInterval = setInterval(autoScrollToBottom, 1000);

setTimeout(function() {
  clearInterval(scrollInterval);
}, 10000);

function scrollToTop() {
  window.scrollTo({ top: 0, behavior: 'smooth' });
}

scrollToTop();

function autoScrollToBottom() {
  window.scrollTo(0, document.body.scrollHeight);
}

var scrollInterval = setInterval(autoScrollToBottom, 1000);

setTimeout(function() {
  clearInterval(scrollInterval);
}, 10000);

function autoScrollSmooth() {
  var scrollStep = 50; 
  var scrollSpeed = 10;
  var scrollDelay = 2000; 

  var scrollInterval = setInterval(function() {
    window.scrollBy(0, scrollStep);

    if (window.innerHeight + window.pageYOffset >= document.body.offsetHeight) {
      clearInterval(scrollInterval);
      setTimeout(autoScrollSmooth, scrollDelay);
    }
  }, scrollSpeed);
}

autoScrollSmooth();

const autoScrollInfiniteLoop = (scrollStep = 50, scrollSpeed = 1) => setInterval(() => (window.scrollBy(0, scrollStep), window.innerHeight + window.pageYOffset >= document.body.offsetHeight && window.scrollTo(0, 0)), scrollSpeed);

autoScrollInfiniteLoop();

function scrollUpDownForever() {
  var scrollStep = 10; 
  var scrollSpeed = 5; 
  var scrollDirection = 1; 

  var scrollInterval = setInterval(function() {
    window.scrollBy(0, scrollStep * scrollDirection);

    if (
      (scrollDirection === -1 && window.pageYOffset <= 0) ||
      (scrollDirection === 1 && window.innerHeight + window.pageYOffset >= document.body.offsetHeight)
    ) {
      scrollDirection *= -1; // Reverse the scroll direction
    }
  }, scrollSpeed);
}

scrollUpDownForever();

function scrollRightForever() {
  var scrollStep = 10; 
  var scrollSpeed = 5; 

  var scrollInterval = setInterval(function() {
    window.scrollBy(scrollStep, 0);

    if (window.innerWidth + window.pageXOffset

 >= document.body.offsetWidth) {
      window.scrollTo(0, window.pageYOffset);
    }
  }, scrollSpeed);
}

scrollRightForever();

function scrollLeftForever() {
  var scrollStep = 10;
  var scrollSpeed = 5;

  var scrollInterval = setInterval(function() {
    window.scrollBy(-scrollStep, 0);

    if (window.pageXOffset <= 0) {
      window.scrollTo(document.body.offsetWidth, window.pageYOffset);
    }
  }, scrollSpeed);
}

scrollLeftForever();

function scrollOneThirdForever() {
  var scrollStep = Math.floor(window.innerWidth / 3); 
  var scrollSpeed = 5; 
  var scrollDirection = 1; 

  var scrollInterval = setInterval(function() {
    window.scrollBy(scrollStep * scrollDirection, 0);

    // Check if reached the end or beginning of the page
    if (
      (scrollDirection === 1 && window.innerWidth + window.pageXOffset >= document.body.offsetWidth) ||
      (scrollDirection === -1 && window.pageXOffset <= 0)
    ) {
      scrollDirection *= -1; // Reverse the scroll direction
    }
  }, scrollSpeed);
}

scrollOneThirdForever();