Якщо ви маєте уявлення що таке посилання, то напевно знаєте, що для навігації по сторінці зручно використовувати якірні посилання. Якірна посилання дозволяє переміщатися до потрібного блоку на сторінці, зручність полягає в можливості використання таких посилань у документах великого об’єму. Таким чином, створюється якір – закладка з унікальним ім’ям на сторінці, після чого в атрибуті тега посилання href вказується ім’я якоря, яке починається з символу #.
За замовчуванням при кліці по такому посиланню в браузері, переміщення на потрібну закладку відбувається миттєво, без будь-яких ефектів. Розглянемо приклад, як можна зробити плавне переміщення від посилання до закладки.
Першим ділом, щоб приклад працював, вам слід підключити JQuery у себе на сторінці. Далі заготовимо наше меню посилань.
Структура меню посилань:
- Link #1
- Link #2
- Link #3
- Link #4
Тут варто зазначити, що у тега nav привласнений атрибут id=menu, а так само кожної ссылке з атрибутом href в меню вказано ім’я якоря.
Блоки, на які посилаються якірні посилання:
…
…
…
…
Кожному блоку привласнений унікальний атрибут id, по якому буде проводитися пошук і переміщення до закладки на сторінці.
Тепер код самого скрипта обробника:
$(document).ready(function(){
$(“#menu”).on(“click”,”a”, function (event) {
// виключаємо стандартну реакцію браузера
event.preventDefault();
// отримаємо ідентифікатор блоку з атрибута href
var id = $(this).attr(‘href’),
// знаходимо висоту, на якій розташований блок
top = $(id).offset().top;
// анимируем перехід до блоку, час: 800 мс
$(‘body,html’).animate({scrollTop: top}, 800);
});
});
Подібна анімація прокрутки на сторінці залишає позитивні враження у користувачів при серфінгу по сторінці. Тому якщо вам потрібно зробити навігацію по сторінці більш наочною, то ви цілком можете скористатися такою фішкою у себе на сайті.
Приклад роботи скрипта, а так само його исходник.
Додав: htmaker, 20.08.2015 р.
(1 голосів, середній: 5,00 з 5)
Завантаження…
Діліться з друзями:
См. також:
Мета тег robots, приклади використання
Рубрика: Html, CSS, Javascript, SEO
Stimed – задаємо CSS-стилі по часу
Рубрика: Html, CSS, Javascript
Небезпека використання атрибуту target=”_blank”
Рубрика: Html, CSS, Javascript, Інф. безпека
Нескінченна анімація обертання на CSS
Рубрика: Html, CSS, Javascript
Анімація обертання при наведенні курсору
Рубрика: Html, CSS, Javascript
Стилізація виділення номера телефону до мобільних браузерах
Рубрика: Html, CSS, Javascript
Список вибору на JQuery
Рубрика: Html, CSS, Javascript
Фіксований заголовок таблиці HTML
Рубрика: Html, CSS, Javascript
Ефекти кнопок для сайту
Рубрика: Html, CSS, Javascript
