Как сделать плавный якорь на jQuery
Сегодня мы поговорим о том, что такое якорь в HTML, как это работает, да так, чтобы действие произошло плавно. Якорь – это знак решетки, который применяется к тегу ссылки a. В основном его используют на страницах с большим объемом контента для быстрого перехода от ссылки меню навигации к конкретному разделу на странице.
Пользователь кликает по ссылке
<a href="#services">Услуги</a>
и сразу попадает в нужное место на той же странице.
<section id="services">попадает сюда</section>
- #services – это якорь
- id="services" – место в документе, куда перебрасывает пользователя
Эта конструкция работает обязательно в связке. Для примера создадим HTML-страницу с якорными ссылками меню навигации и секциями.
<header class="header" id="header">
<nav class="nav" id="nav">
<a href="#about">О нас</a>
<a href="#services">Услуги</a>
<a href="#blog">Блог</a>
<a href="#works">Наши работы</a>
<a href="#contact">Контакты</a>
</nav>
</header>
<section id="about">
<h1>О нас</h1>
<p> текст в параграфе </p>
</section>
<section id="services">
<h1>Услуги</h1>
<p>текст в параграфе</p>
</section>
<section id="blog">
<h1>Блог</h1>
<p> текст в параграфе</p>
</section>
<section id="works">
<h1>Наши работы</h1>
<p>текст в параграфе </p>
</section>
<section id="contact">
<h1>Контакты</h1>
<p> текст в параграфе </p>
</section>
CSS код
/* обнуление полей и отступов */
* {
margin: 0;
padding: 0;
}
/* размер шрифта для заголовков */
h1 {
font-size: 20px;
}
/* панель навигации */
.header {
padding: 20px 0;
width: 100%;
background-color: #eb8b8d;
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);
position: fixed;
top: 0;
left: 0;
display: flex;
justify-content: center;
align-items: center;
}
/* ссылки меню */
a {
display: inline-block;
margin: 0 15px;
position: relative;
color: #fff;
text-decoration: none;
text-transform: uppercase;
}
/* отступы для секций */
section{
padding: 70px; /* поля вокруг секций */
}
На этом можно было бы и закончить, ведь перебрасывание от ссылок к секциям работает. Только процесс перехода происходит очень стремительно, а хотелось бы немного медленнее.
Плавный якорь на jQuery
Плавность достигается за счет добавления JavaScript кода, но мы воспользуемся библиотекой jQuery, как облегченным вариантом написания кода.
$('a[href^="#"]').click(function(){ // #1
let anchor = $(this).attr('href'); // #2
$('html, body').animate({ // #3
scrollTop: $(anchor).offset().top // #4
}, 600); // #5
});
Комментарии кода
#2) Создаем переменную anchor(произвольное название) и присваиваем ей значение атрибута href (#about, #services, #blog, #works, #contact).
#3) Внутри тегов html и body, произойдет анимация, дальше опишем её.
#4) Устанавливает текущее положение значений переменной anchor с отступом относительно верха при прокрутке страницы сверху вниз.
#5) Время, в течении которого произойдет анимация.
На живом примере, вы можете увидеть, как при клике на ссылку, вас плавно перебрасывает в нужное место страницы.
Заключение
Для полноценной разработки сайтов, одних только знаний HTML/CSS, недостаточно. Необходимо уметь управлять элементами страницы с помощью JavaScript, могу посоветовать вам этот видео-курс.
-
Создано 08.05.2019 10:16:48
-
Михаил Русаков
Комментарии (0):
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.