Плавный переход по секциям страницы с anchor.js

demosourse

С помощью этого небольшого jQuery плагина мы можем создать плавное перемещение от одной секции страницы к другой.

Демо

Интерактивное демо с использованием anchor.js:

http://jsfiddle.net/stanislas_prime/h08Lva7q/

Установка

Подключите anchor.js и anchor.init.js. Так же забудьте про jQuery.

<script type="text/javascript" src="jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="anchor.js"></script>
<script type="text/javascript" src="anchor.init.js"></script>

Разметка

С разметкой всё просто. Перечисляем секции, задаём им id; элементам ссылок выставляем соответствующие значения секций на которые нужно осуществить переход.

<section id="section1">
	<h3>Первая секция</h3>
	<p><a href="#section2">Переход на следующую секцию</a></p>
</section>
<section id="section2">
	<h3>Вторая секция</h3>
	<p><a href="#section3">Переход на следующую секцию</a></p>
</section>
<section id="section3">
	<h3>Третья секция</h3>
	<p><a href="#section1">Переход на первую секцию</a></p>
</section>

Стили

Создадим расстояние между секциями через CSS.

[id^=section] {
	margin-bottom: 100%;
}

Инициализация плагина

Выбираем все ссылки-якоря и применяем к ним действие плагина.

$("document").ready(function(){
   $('a[href*=#]').anchor({
       transitionDuration : 1200
   });
});

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: https://github.com/cbopp-art/anchor
Перевел: Станислав Протасевич
Урок создан: 5 Декабря 2014
Просмотров: 22167
Правила перепечатки


5 последних уроков рубрики "jQuery"

^ Наверх ^