Плавне переміщення по сторінці jquery

Коли пишеш великий текст, потім ставати незручно його переглядати. Але коли якщо переміщатися хоча б по заголовкам, то це вже приємніше. Та й для користувача це зручніше. І в цьому уроці ми розглянемо як зробити таке переміщення по тексту найбільш привабливим і плавним.

Реальний приклад можна побачити тут:

Подивитися прімерСкачать

HTML частина

Насамперед необхідно підключити необхідні плагіни:

12

lt;script type="Text / javascript" src="Http://code.jquery.com/jquery-1.9.1.js"gt; lt;/scriptgt;lt;script type="Text / javascript" src="Js / jquery.jumpto.js"gt; lt;/scriptgt;

Відео: Плавний скролінг до якоря-посиланню

Структура HTML сторінки виглядає наступним чином:

1234567891011121314

lt;div class="Page_container"gt;lt;div class="Jumpto-block"gt;lt;h2gt; Заголовок 1lt;/h2gt;lt;h3gt; Підзаголовок 1lt;/h3gt; ....lt;h3gt; Підзаголовок 2lt;/h3gt; ....lt;/divgt;lt;div class="Jumpto-block"gt;lt;h2gt; Заголовок 2lt;/h2gt;lt;h3gt; Підзаголовок 1lt;/h3gt; ...lt;/divgt;lt;/divgt;

Відео: Плавне прокручування до якоря

JS частина

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

1234567891011

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

Відео: javascript переміщення об`єкта по робочій області

Деякі пояснення по коду:

• firstLevel - тут визначається селектор першого рівня навігації. За замовчуванням «gt; h2 »
• secondLevel - також даний плагін (JumpTo) підтримує навігацію з підміню, як ви можете переконатися на другому і третьому демо прикладі.
• animate - визначає на скільки швидко буде прокручуватися сторінка при переході до вибраного заголовку.
• showTitle - це просто текст над меню.
• closeButton - кнопка «Закрити». Вона дозволяє приховати меню або розкрити його. За замовчуванням присутній, але можна її Буран виставивши значення «false».

Відео: Уроки по CSS / CSS3. Частина 4. Позиціонування елементів

висновок

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

Успіхів!

джерело: onextrapixel.com