Скролл по статьям блога
Здравствуйте уважаемые гуру!
Хочу сделать прокрутку по статьям как на http://community.modx-cms.ru/, используя при этом jquery. К сожалению, в сети решения не нашел, а мои знания в этом вопросе весьма скудны. Понимаю, что нужно использовать плагин scrollTo, и с перемоткой до определенного элемента, проблем нет. А как сделать, что бы происходил листинг по топикам с одинаковыми тегами?
<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>
</head>
<body>
<div id="container">
<article>
<header>Заголовок 1</header>
<div>ля-ля-ля</div>
<footer></footer>
</article>
<article>
<header>Заголовок 2</header>
<div>пум-пум-пум</div>
<footer></footer>
</article>
<article>
<header>Заголовок 3</header>
<div>ра-та-та</div>
<footer></footer>
</article>
<aside class="toolbar" style="position: fixed; top: 327px; display: block;">
<section class="toolbar-topic" id="" style="">
<a href="#" title="Предыдущая статья" class="toolbar-topic-prev"><i></i></a>
<a href="#" title="Следующая статья" class="toolbar-topic-next"><i></i></a>
</section>
<section class="toolbar-scrollup" id="toolbar_scrollup">
<a href="#" title="Вверх"><i></i></a>
</section>
</aside>
</div>
</body>
</html>
|
Сам спросил, сам отвечаю:
нашел решение здесь Упрощенный код теперь выглядит так:
<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, прокрутка не работает вовсе. Пойду копать, но может кто-то натолкнет на мысль? |
| Часовой пояс GMT +3, время: 01:31. |