закрыть

шаблоны для MaxSite CMS от RuTheme

Плавный скроллер страницы с навигацией на JQuery

Плавный скроллер страницы с навигацией на JQuery

PageScroller это мощный JavaScript, предназначенный для навигации по странице с эффектом плавной прокрутки, которая использует надежные библиотеки JQuery.

Одна из особенностей скрипта это его простота использования, плагин будет работать на любом сайте.


Для начала в head надо подключить необходимые библиотеки, плагин и CSS

<link rel="stylesheet" href="./stylesheets/style.css" type="text/css" media="all" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="./javascripts/pagescroller.min.js"></script>

Запускается плагин строчкой

$(document).ready(function(){
	$('#main').pageScroller();
});

Но для того чтобы дать свои названия пунктам навигации необходимо создать массив с именами, который потом надо указать в опциях .pageScroller.


Пользовательские имена навигационных ссылок могут быть установлены следующим массивом (дополнительные опции плагина смотри в архиве):

var navLabel = new Array('RuTheme', 'Lavender', "LemonChiffon", 'LightCoral', 'LightSalmon');	//создаем массив с именами пунктов
$('#main').pageScroller({ 
	navigation: navLabel,		//массив с именами пунктов
	animationSpeed:  1000 ,	//скорость прокрутки
	scrollOffset :  0		//смещение целевой области от верхней части раздела
});

А вот пример довольно простой html-структуры

<div id="main">
	<div class="section"></div>
	<div class="section"></div>
	<div class="section"></div>
	<div class="section"></div>
	<div class="section"></div>
</div>

При копировании материала ссылка на данную статью обязательна.


Источник: http://pagescroller.com/


Поделиться мнением!

grin LOL cheese smile wink smirk rolleyes confused surprised big surprise tongue laugh tongue rolleye tongue wink raspberry blank stare long face ohh grrr gulp oh oh downer red face sick shut eye hmmm mad angry zipper kiss shock cool smile cool smirk cool grin cool hmm cool mad cool cheese vampire snake excaim question

Используйте нормальные имена. Ваш комментарий будет опубликован после проверки.

Вы можете войти под своим логином или зарегистрироваться на сайте.

Авторизация MaxSiteAuth. Loginza

(обязательно)