Why Is My Function Alternating Between Working and Then Not Javascript

This is my very first ever question asked here, so I do apologise in advance if I am not following correct guidelines.

Basically what I'm trying to do is to manually code side-section navigating in Javascript. The navigating itself is working just fine, one can click either left or right and the sections will scroll left and right endlessly in a carousel. But when I try to set the previous pages scrollTop back to 0 once the user has moved off the section I run into problems.

If I scroll through each section and scroll a bit of the way down on each, when I return to the first page and cycle through them again, they seem to alternate as to whether their scrollTop was actually set to 0.

HTML body:

<div class="Arrow" id="arrowLeft"></div>
<div class="Arrow" id="arrowRight"></div>
<section class="Page" id="page1"><div class="PageContent"></div></section>
<section class="Page" id="page2"><div class="PageContent"></div></section>
<section class="Page" id="page3"><div class="PageContent"></div></section>
<section class="Page" id="page4"><div class="PageContent"></div></section>
<section class="Page" id="page5"><div class="PageContent"></div></section>
<section class="Page" id="page6"><div class="PageContent"></div></section>
<section class="Page" id="page7"><div class="PageContent"></div></section>
<section class="Page" id="page8"><div class="PageContent"></div></section>
<script src="JavaScript/scroller.js"></script>

Javascript:

//initialising variables and populating arrays
var currentPage = 0;
var previousPage = 0;
var pages = document.getElementsByClassName("Page");
var sections = [];
for (i=0;i<pages.length;i++) {
    sections.push(pages[i]);
}
var pageOffSets = [0, 100, 200, 300, 400, -300, -200, -100];
var zOffSets = [0,-1,-2,-3,-4,-3,-2,-1];
for (i = 0;i<sections.length;i++) {
    sections[i].style.left = pageOffSets[i] + "vw";
    sections[i].style.zIndex = zOffSets[i];
}


//Navigate function
function slidePage(direction) {
        previousPage = currentPage;
    if (direction=="right") {
        currentPage+=1;
        if (currentPage>7) {
            currentPage = 0;
        }
        var hold = sections.shift();
        sections.push(hold);

         for (i=0;i<sections.length;i++) {
            sections[i].style.left = pageOffSets[i] + "vw";
            sections[i].style.zIndex = zOffSets[i];
        }
    }

    if (direction=="left") {
        currentPage-=1;
        if (currentPage<0) {
            currentPage = 7;
        }
        var hold = sections.pop();
        sections.unshift(hold);

         for (i=0;i<sections.length;i++) {
            sections[i].style.left = pageOffSets[i] + "vw";
            sections[i].style.zIndex = zOffSets[i];
        }
    }

    //!!!
    //This is the part that is supposed to set the scrollTop back to 0
    //!!!
    setTimeout(function(){
        sections[previousPage].scrollTop = 0;
    }, 1000);
}


//Event listeners for when the user clicks
document.getElementById("arrowLeft").addEventListener("click", function(){
    slidePage("left");
});
document.getElementById("arrowRight").addEventListener("click", function(){
    slidePage("right");
});

I would really appreciate if someone could point out what I'm doing wrong.