Вероятно многие слышали, где можно установить якорь на информации, где в дальнейшем закрепляем его ключевому слову. Вот как раз в этой статье предоставлен материал, как можно не сложно сделать якорные ссылки, что на многих сайтах они просто бесценны по своим функциям.
А точнее, на каких интернет порталах плавный скроллинг к его секциям создаст красивое оформлению, что безусловно станет привлекательным по своему функционалу.
Библиотека:
Код
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
1. Делаем простую разметку:
HTML
Код
<nav>
<ul class="clearfix">
<li><a href="#section1">Секция 1</a></li>
<li><a href="#section2">Секция 2</a></li>
<li><a href="#section3">Секция 3</a></li>
</ul>
</nav>
<section id="section1">
<h3>Первая секция</h3>
<p><a href="#section2">Перейти к секции 2</a></p>
</section>
<section id="section2">
<h3>Вторая секция</h3>
<p><a href="#section3">Перейти к секции 3</a></p>
</section>
<section id="section3">
<h3>Третья секция</h3>
<p><a href="#section1">Перейти к секции 1</a></p>
</section>
CSS
Код
.clearfix:after {
content: "";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
nav {
width: 100%;
background-color: #051945;
}
ul {
list-style: none;
width: 249px;
}
ul:hover li a {
color: grey;
}
ul li {
float: left;
line-height: 30px;
}
ul li a {
color: #FFF;
text-decoration: none;
margin: 15px 10px;
}
ul li:hover a {
color: #22EBBE;
}
section {
margin-bottom: 100%;
}
See the Pen
Якорь by Kocsten (@kocsten)
on CodePen.
Как можно заметить, что при ключе пол ключевым словам, где закреплен якорь идет функция, но она не плавная, что смотрится не красиво.
Чтобы все происходило корректно, а точнее все было в плавном режиме, то подключаем jQuery код, где не забываем прописать библиотеку обязательно.
JS
Код
$(function(){
$('a[href^="#"]').on('click', function(event) {
// отменяем стандартное действие
event.preventDefault();
var sc = $(this).attr("href"),
dn = $(sc).offset().top;
/*
* sc - в переменную заносим информацию о том, к какому блоку надо перейти
* dn - определяем положение блока на странице
*/
$('html, body').animate({scrollTop: dn}, 1000);
/*
* 1000 скорость перехода в миллисекундах
*/
});
});
Теперь смотрим как получилось
See the Pen
Переход к якорю by Kocsten (@kocsten)
on CodePen.
