Симуляция нескольких страниц
<button id="up">⇑</button>
<button id="down">⇓</button>
<div class="page">
<div class="section">Один</div>
<div class="section" style="display:none;">Два</div>
<div class="section" style="display:none;">Три</div>
<div class="section" style="display:none;">Четыре</div>
</div>
<div class="page">
<div class="section" style="display:none;">Пять</div>
<div class="section" style="display:none;">Шесть</div>
<div class="section" style="display:none;">Семь</div>
</div>
<script>
var pages = document.querySelectorAll('.page'),
divs = pages[0].querySelectorAll('div'),
i = 0, j = 0;
down.onclick = function() {
divs[i].style.display="none";
i = (i < (divs.length - 1))?i+1:0;
if(i == 0) { // здесь как-бы загрузка предыдущей страницы
j = (j > 0)?j -1:pages.length - 1;
divs = pages[j].querySelectorAll('div')
}
divs[i].style.display="block";
}
up.onclick = function() {
divs[i].style.display="none";
i = (i > 0)?i -1:divs.length - 1;
if(i == divs.length - 1) { // здесь как-бы загрузка следующей страницы
j = (j < (pages.length - 1))?j+1:0;
divs = pages[j].querySelectorAll('div');
i = divs.length - 1;
}
divs[i].style.display="block";
}
</script>