Simple Page Scroller

[Charlie_2025]

I have a javascript that is supposed to scroll a page line by line. When it reaches the bottom of the page, it is supposed to return to the top and start again. Instead, it goes to the bottom and just stops. This is what I have.

<script>
// Get the body element for scrolling
const body = document.body;

// Scrolling speed (adjust as needed)
const scrollSpeed = 1; // pixels per interval

// Interval duration (adjust for smoother/faster scrolling)
const intervalDuration = 40; // milliseconds

let scrollInterval;

function startScrolling() {
scrollInterval = setInterval(() => {
// Scroll down by the specified speed
window.scrollBy(0, scrollSpeed);

// Check if we've reached the bottom
if (window.innerHeight + window.scrollY >= body.scrollHeight) {
// If at the bottom, reset to the top
window.scrollTo(0, 0);
}
}, intervalDuration);
}

function stopScrolling() {
clearInterval(scrollInterval);
}

// Start scrolling when the page loads
window.onload = startScrolling;

// Optional: Stop scrolling on a key press (e.g., Spacebar)
document.addEventListener('keydown', (event) => {
if (event.code === 'Space') {
if (scrollInterval) {
stopScrolling();
scrollInterval = null;
} else {
startScrolling();
}
}
});
</script>

 

[codingd]

Hi, to ensure that the scrolling continues smoothly after reaching the bottom, you can modify the code to reset the scroll position and immediately continue scrolling. Here's an updated version of your script:

<script>
// Get the body element for scrolling
const body = document.body;

// Scrolling speed (adjust as needed)
const scrollSpeed = 1; // pixels per interval

// Interval duration (adjust for smoother/faster scrolling)
const intervalDuration = 40; // milliseconds

let scrollInterval;

function startScrolling() {
    scrollInterval = setInterval(() => {
        // Scroll down by the specified speed
        window.scrollBy(0, scrollSpeed);

        // Check if we've reached the bottom
        if (window.innerHeight + window.scrollY >= body.scrollHeight) {
            // If at the bottom, reset to the top
            window.scrollTo(0, 0);
        }
    }, intervalDuration);
}

function stopScrolling() {
    clearInterval(scrollInterval);
}

// Start scrolling when the page loads
window.onload = startScrolling;

// Optional: Stop scrolling on a key press (e.g., Spacebar)
document.addEventListener('keydown', (event) => {
    if (event.code === 'Space') {
        if (scrollInterval) {
            stopScrolling();
            scrollInterval = null;
        } else {
            startScrolling();
        }
    }
});
</script>

 

[VBService]

document.addEventListener('keydown', (event) => {
  if (event.code === 'Space') {
    if (scrollInterval) {
      stopScrolling();
      scrollInterval = null;
    } else {
      startScrolling();
    }
  }
})

Without preventDefault(), pressing the Spacebar while scrolling is paused causes the page to "jump" down as if the user manually pressed Spacebar to scroll. This default browser behavior can be prevented by calling event.preventDefault(), ensuring a smooth toggle between scrolling and pausing without any visual jump.

document.addEventListener('keydown', (event) => {
  if (event.code !== 'Space') return;
  event.preventDefault(); // prevent page from jumping
  scrollInterval ? stopScrolling() : startScrolling();
})

Here's a slightly improved version of your code shown below.

// Scrolling configuration
const scrollSpeed = 1;       // pixels per interval
const intervalDuration = 40; // milliseconds

let scrollInterval = null;

function startScrolling() {
  if (scrollInterval) return; // avoid multiple intervals

  scrollInterval = setInterval(() => {
    window.scrollBy(0, scrollSpeed);
    const atBottom =
          Math.ceil(window.innerHeight + window.scrollY) >= document.documentElement.scrollHeight;

    if (atBottom) window.scrollTo(0, 0);
  }, intervalDuration);
}

function stopScrolling() {
  clearInterval(scrollInterval);
  scrollInterval = null;
}

// Start scrolling when the page loads
window.addEventListener('load', startScrolling);

// Toggle scrolling with spacebar
document.addEventListener('keydown', (event) => {
  if (event.code !== 'Space') return;
  event.preventDefault(); // prevent page from jumping
  scrollInterval ? stopScrolling() : startScrolling();
});

To add a 2-second pause before scrolling returns to position (0, 0), you need to delay the window.scrollTo(0, 0) call using setTimeout. Here's the updated code with that effect [demo]:

// Scrolling configuration
const scrollSpeed = 1;      // pixels per interval
const intervalDuration = 40; // milliseconds
const pauseBeforeReset = 2; // pause duration 2 seconds

let scrollInterval = null;

function startScrolling() {
  if (scrollInterval) return; // avoid multiple intervals

  scrollInterval = setInterval(() => {
    window.scrollBy(0, scrollSpeed);
    const atBottom =
          Math.ceil(window.innerHeight + window.scrollY) >= document.documentElement.scrollHeight;

    if (atBottom) {
      stopScrolling(); // stop scrolling during the pause
      setTimeout(() => {
        window.scrollTo(0, 0); // go back to top
        startScrolling();      // resume scrolling
      }, (pauseBeforeReset * 1000));
    }
  }, intervalDuration);
}

function stopScrolling() {
  clearInterval(scrollInterval);
  scrollInterval = null;
}

// Start scrolling when the page loads
window.addEventListener('load', startScrolling);

// Toggle scrolling with spacebar
document.addEventListener('keydown', (event) => {
  if (event.code !== 'Space') return;
  event.preventDefault(); // prevent page from jumping
  scrollInterval ? stopScrolling() : startScrolling();
});

 

[thuggy]

That script is close, but the issue is you’re checking

body.scrollHeight

On some browsers the full page height isn’t on body, it’s on

document.documentElement

So your bottom check fails and it just hangs there.
Try this instead:

const scrollSpeed = 1;      // pixels per interval
const intervalDuration = 40; // ms
let scrollInterval;


function startScrolling() {
  scrollInterval = setInterval(() => {
    window.scrollBy(0, scrollSpeed);


    // use documentElement for cross-browser page height
    const doc = document.documentElement;
    if (window.innerHeight + window.scrollY >= doc.scrollHeight) {
      window.scrollTo(0, 0); // reset to top
    }
  }, intervalDuration);
}


function stopScrolling() {
  clearInterval(scrollInterval);
}


// start on load
window.onload = startScrolling;


// toggle with Space
document.addEventListener('keydown', e => {
  if (e.code === 'Space') {
    if (scrollInterval) {
      stopScrolling();
      scrollInterval = null;
    } else {
      startScrolling();
    }
  }
});