Форум

cepeus · #1 (**permalink**) 24.05.2013, 18:25

Здравствуйте уважаемые гуру!
Хочу сделать прокрутку по статьям как на 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>

cepeus · #2 (**permalink**) 25.05.2013, 03:05

Сам спросил, сам отвечаю:
нашел решение здесь
Упрощенный код теперь выглядит так:

<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, прокрутка не работает вовсе.
Пойду копать, но может кто-то натолкнет на мысль?

Форум

Справочник

Discord чат

Курсы javascript