Якорные ссылки с плавным переходом jQuery
 | |
| В данном материале предоставлен материал, как самому создать переход по якорным ссылкам, которые нужны для навигации, и делается внутри страницы. Как известно данные ссылки облегчают навигацию, а точнее если вы пишите большую статью, где будет несколько ключевых слов, а точнее заголовков, то анкорные ссылки можно привязать каждому значение. Где изначально пишем, как пример "Первая часть" - что при клике плавный переход переместит к началу абзаца под данным названием. На сайте уже много представлено разного материала по данному эффект, но основном на одну или две ссылке. Здесь как можно заметить, вы можете разместить намного больше. Также не нужно забывать, что плавный скролл, что происходит после нажатия на якорную ссылку, это отлично будет смотреться на любом тематическом сайте. Вы этим намного пользователям и гостям сайта сокращаете время для поиска. Где им остается прочесть заголовки, и какая тема их заинтересует, то они при клике ее быстро найдут. Что обычно в скорости найденного материала якорь создан, но и красиво смотрится на сайте. Почему спросите Якорь, так как мы привязываем к названию, что можно сделать к любому, но основном это заголовки.  Делаем переход по якорной ссылки на JSУстановка: В HEAD прописываем Код <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script> HTML Код <nav id="navigasea"> <ul> <li><a href="#yak1">Первый переход якоря</a></li> <li><a href="#yak2">Второй переход якоря</a></li> <li><a href="#yak3">Третий переход якоря</a></li> <li><a href="#yak4">Четвертый переход якоря</a></li> </ul> </nav> <div id="content"> <section id="yak1"> <h2>Заголовок 1</h2> Здесь первая тема иди заголовок! </section> <div class="separator"></div> <section id="yak2"> <h2>Заголовок 2</h2> Второе описание, которое выставлено под плавный якорь! </section> <div class="separator"></div> <section id="yak3"> <h2>Заголовок 3</h2> Третья тема, что завязана на плавном переходе якорной ссылки. </section> <div class="separator"></div> <section id="yak4"> <h2>Заголовок 4</h2> Здесь можно разместить 4 якорную ссылку с плавным переходом. </section> JS Код type="text/javascript">$(document).ready(function(){$("#navigasea").on("click","a",function(event){event.preventDefault();var id=$(this).attr('href'),top=$(id).offset().top;$('body,html').animate({scrollTop:top},1500);});}); Стилистика CSS здесь изначально не предусмотрены, ведь в материале представлен сам эффект по якорным ссылкам. Но это не означает, что их не может быть. Но если мы говорим про отдельную страницу, то оформление безусловно нужны, где прописываем класс и под него уже создаем стилистику оформления. Демонстрация | |
Поделиться в социальных сетях
Материал разместил
| Комментарии: 0 | |