Question

I am using the following code on a website to imitate smooth scrolling:

function scrollWindow() {
    // window.scrollBy(1040,0)
    var timerID = setInterval(function() {
        window.scrollBy(104, 0);
        if( window.pageXOffset >= 1040 ) clearInterval(timerID);
    }, 10);
}

However, after clicking Scroll (the scrollWindow function) the page scrolls 1040 like it should.

Any subsequent time, it does not work, unless i manually scroll back to the beginning.

Would i be right in thinking that if( window.pageXOffset >= 1040 ) is canceling it because although it hasn’t moved 1040, it is past that point on the page?

If so, how can i solve this?

Answer 1

Yes, your assessment is correct; but it could be corrected with a twist in the approach:

function scrollWindow() {
    var scrolledSoFar = 0;
    var scrollStep = 104;
    var scrollEnd  = 1040;
    var timerID = setInterval(function() {
        window.scrollBy(scrollStep, 0);
        scrolledSoFar += scrollStep;
        if( scrolledSoFar >= scrollEnd ) clearInterval(timerID);
    }, 10);
}

Update
Another pitfall in the code is that you are executing scrollBy before checking for the condition. So on your page, even after you have scrolled past 1040, clicking scroll will move the page by one scrollStep amount. To prevent that, this order is better:

function scrollWindow() {
    var scrolledSoFar = 0;
    var scrollStep = 104;
    var scrollEnd  = 1040;
    var timerID = setInterval(function() {
        if( scrolledSoFar < scrollEnd ) {
            window.scrollBy(scrollStep, 0);
            scrolledSoFar += scrollStep;
        } else {
            clearInterval(timerID);
        }
    }, 10);
}