Advanced JavaScript Scroll Techniques

Explore advanced JavaScript scroll techniques for smooth, fast, and continuous scrolling. Learn how to scroll to the top or bottom of a page, scroll left or right indefinitely, and create infinite scroll loops.

Scroll to Bottom of Page

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

Scroll to Top of Page

window.scrollTo(0, 0);

Scroll to Left Side of Page

window.scrollTo(0, window.pageXOffset);

Scroll to Right Side of Page

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

Smooth Scrolling to Bottom

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

Fast Scroll to Bottom

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

superScroll();

Super-Fast Scroll to Bottom

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

superScroll();

Super-Fastest Scroll to Bottom

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

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

var scrollInterval = setInterval(autoScrollToBottom, 1000);

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

Scroll to Top of Page

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

scrollToTop();

Autoscroll to Bottom

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

var scrollInterval = setInterval(autoScrollToBottom, 1000);

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

Autoscroll Smoothly to Bottom

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();

Autoscroll with Infinite Loop

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

autoScrollInfiniteLoop();

Scroll Up and Down Forever

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();

Scroll Right Forever

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();

Scroll Left Forever

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();

Scroll One-Third Forever

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();