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