Сам спросил, сам отвечаю:
нашел решение
здесь
Упрощенный код теперь выглядит так:
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="http://demos.flesler.com/jquery/scrollTo/js/jquery.scrollTo-min.js"></script>
<style>article {height:1000px;}</style>
<script>
$(document).ready (function () {
var $chapters = $('#container').find('article');
var $chScrollPositions = new Array();
$chapters.each(function(i){
$chScrollPositions[i] = Math.round($(this).offset().top - $('#container').offset().top);
});
$chapters.eq(0).addClass('active');
$('#nav > nav > button').click(function(){
var last = $chapters.parent().find('article.active').removeClass('active').index();
var next;
switch($(this).index()){
case 0:
next = (last + 1 == $chapters.length) ? 0 : last + 1;
break;
case 1:
next = (last + 1 == $chapters.length) ? 0 : last - 1;
break;
case 2:
next = 0;
break;
}
$chapters.eq(next).addClass('active');
$.scrollTo($chScrollPositions[next], 1000);
});
});
</script>
</head>
<body>
<section id="nav" style="position:fixed; right:0; top: 200px; width:30%">
<nav>
<button class="next">Туды</button>
<button class="last">Сюды</button>
<button class="first">Обратно</button>
</nav>
</section>
<div id="container" style="width:70%">
<article>
<header>Заголовок 1</header>
<div>ля-ля-ля</div>
</article>
<article>
<header>Заголовок 2</header>
<div>пум-пум-пум</div>
</article>
<article>
<header>Заголовок 3</header>
<div>ра-та-та</div>
</article>
</div>
</body>
</html>
Теперь другая проблема. В моем коде наблюдается мигание при прокрутке. Если убрать задержку анимации scrollTo, прокрутка не работает вовсе.
Пойду копать, но может кто-то натолкнет на мысль?