Плавная прокрутка CSS по якорным ссылкам
 | |
| В статье узнаете про якорные ссылки, и правильное размещение на сайте, где создаем плавный скроллинг страниц к заданному материалу на странице. Создавая якорные ссылки, вы изначально размещаете их в определенное место, где посетитель сайта по клику перейдет на заданный материал на странице. Если рассматривать их по своим функциям, то по сути можно сказать, что это отличные закладки, где аналогично по одному клику мы попадаем на статью или материал на одной странице. Это значит не будет переходов, а стильно созданный scroll, который вы можете самостоятельно настроить по заданной скорости. В большинстве такую функцию вы могли наблюдать на одностраничных сайтах или портфолио, где в самом верху прописываем ключевые слова и выставляем под якорные ссылки. И при заходе на такой интернет сайт, будет не сложно найти информацию, так как можно просто опуская страницу ознакомится с большой информацией. Или воспользоваться якорной ссылкой, где находим нужное ключевое слово и в один миг попадаем под нужное описание с первой строки или с названия того или иного материала. Это в зависимости, где вы закрепите якорь, там и остановится страница. Где стразу рассмотрим несколько примеров: Но начнем с основы: Что такое якорные ссылки и для чего они нужны? Это функционал, который поможет направить посетителей в нужную категорию на сайте. Как уже поняли, стоит посетителю сделать клик по ссылки или заданному элементу, к которому закреплена ссылка на якорь, то здесь он автоматически перемещается в ту часть страницы, где вы изначально закрепили якорь, все очень просто и не так сложно, что могло изначально показаться. Как создать якорную ссылку? Первый вариант: Задаем ссылке через хэштег ссылку такого вида: HTML Код <ul class="link_box"> <li><a href="#link">Ссылка</a></li> <li><a href="#link2">Ссылка</a></li> <li><a href="#link3">Ссылка</a></li> <li><a href="#link4">Ссылка</a></li> </ul> Потом, необходимо категориям или блоку до которого нужно прокрутить, а главное добавляем id с аналогичным именем, как href у ссылки, только здесь уже не нужен хэштег, где не забываем, что каждый id должен соответствовать своей ссылке. Код <div id="link">Раздел</div> <div id="link2">Раздел</div> <div id="link3">Раздел</div> <div id="link4">Раздел</div> Как сделать плавную прокрутку якоря на чистом JS? Все просто, нужно скриптами добавляем следующий код: Код const anchors = document.querySelectorAll('.link_box a[href*="#"]') for (let anchor of anchors) { anchor.addEventListener('click', function (e) { e.preventDefault() const blockID = anchor.getAttribute('href').substr(1) document.getElementById(blockID).scrollIntoView({ behavior: 'smooth', block: 'start' }) }) } На этом все, так как плавная прокрутка якорной ссылки полностью установлена. Второй вариант: Для начала нужно просто создать ссылку и вместо пути указать якорь и знак решетка перед ним - # HTML Код <a href="#yak1">Ссылка на якорь 1</a> Якорем будет блок с ID - #yak1. Далее просто прописываем нужный элемент с нужным айди. Код <div id="yak1"></div> В нашем случаи - это простой div блок. По сути, для простого перехода это все. При нажатии на такую ссылку, посетителя моментально перебросит на ту часть страницы где расположен блок с якорем. Для начала в шапку перед закрывающимся head или в подвал перед закрывающимсяbody нужно подключить библиотеку jQuery. Код <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script> Теперь после библиотеки, подключаем сам скрипт, который и будет осуществлять анимацию плавного перехода. Код <script type="text/javascript"> $(document).ready(function(){ $("#menu").on("click","a", function (event) { event.preventDefault(); var id = $(this).attr('href'), top = $(id).offset().top; $('body,html').animate({scrollTop: top}, 1500); }); }); </script> Во второй строке скрипта указывается айди блока с якорными ссылками. Как пример, можно организовать вот такой блок: Код <nav id="menu"> <ul> <li><a href="#yak1">Переход по якорной ссылке 1</a></li> <li><a href="#yak2">Переход по якорной ссылке 2</a></li> <li><a href="#yak3">Переход по якорной ссылке 3</a></li> <li><a href="#yak4">Переход по якорной ссылке 4</a></li> </ul> </nav> В одной из строк заданна цифра 1500, которая идет за время в миллисекундах, это значит ровно 1,5 секундам. Что вы самостоятельно задаете временной отрезок времени, а значит можете сделать плавный или быстрый скролл, так как за это время идет переход к нужному якорю. Демонстрация | |
Поделиться в социальных сетях
Материал разместил
| Комментарии: 2 | |
|
| |
