Плавное перемещение по странице jQuery

Когда пишешь большой текст, затем становиться неудобно его просматривать. Но когда если перемещаться хотя бы по заголовкам, то это уже приятнее. Да и для пользователя это удобнее. И в этом уроке мы рассмотрим как сделать такое перемещение по тексту наиболее привлекательным и плавным.

Реальный пример можно увидеть здесь:

Посмотреть примерСкачать

HTML часть

Первым делом необходимо подключить необходимые плагины:

1
2

    <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
    <script type="text/javascript" src="js/jquery.jumpto.js"></script>

Структура HTML страницы выглядит следующим образом:

1
2
3
4
5
6
7
8
9
10
11
12
13
14

<div class="page_container">
    <div class="jumpto-block">
        <h2>Заголовок 1</h2>
        <h3>Подзаголовок 1</h3>
        ....
        <h3>Подзаголовок 2</h3>
        ....
    </div>
    <div class="jumpto-block"> 
        <h2>Заголовок 2</h2>
        <h3>Подзаголовок 1</h3>
        ...
    </div>
</div>

JS часть

Как только HTML страница готова, необходимо вызвать jQuery функцию:

1
2
3
4
5
6
7
8
9
10
11

$(".page_container").jumpto({
    firstLevel: "> h2",
    secondLevel: false,
    innerWrapper: ".jumpto-block",
    offset: 400,
    animate: 1000,
    navContainer: false,
    anchorTopPadding: 20,
    showTitle: "Перейти к",
    closeButton: true
});

Некоторые пояснения по коду:

• firstLevel — здесь определяется селектор первого уровня навигации. По умолчанию «> h2»
• secondLevel — также данный плагин(JumpTo) поддерживает навигацию с подменю, как вы можете убедиться на втором и третьем демо примере.
• animate — определяет на сколько быстро будет прокручиваться страница при переходе к выбранному заголовку.
• showTitle — это просто текст над меню.
• closeButton — кнопка «Закрыть». Она позволяет скрыть меню или раскрыть его. По умолчанию присутствует, но можно ее бурать выставив значение «false».

Вывод

Конечно можно и не использовать jQuery, чтобы организовать перемещение по странице(с помощью якорей или anchor), но в этом случае перемещение выглядит действительно красиво :).

Успехов!

Источник: www.onextrapixel.com