В этом примере я хочу показать вам как создать плавную навигацию (прокрутку) страницы до якоря для вашего сайта. При нажатии на любой из пунктов меню происходит плавный переход без перезагрузки и обновления страницы к заданному блоку или элементу. Такой скролл называют еще «go to». Данный пример вы легко можете применить при создании своего сайта или для улучшения уже существующего проекта.
Для того чтобы осуществлялся переход к нужному месту (секции) на сайте, достаточно добавить ссылку на идентификатор нужного блока. Например строчка кода ниже указывает на переход с любой секции сайта в блок B:
<a href="#b">Перейти к B</a>
Идентификатор блока B которого указан в id секции:
<section id="d">
Эффект плавной навигации достигается благодаря использованию небольшого скрипта, для работы которого необходимо обязательно подключить библиотеку jQuery.
Вот и все! Теперь вы знаете, как реализовать эффект плавной прокрутки секции (блока) страницы до заданного якоря. Посмотреть и скачать демо пример вы можете ниже.
Если у вас есть вопросы, задавайте в комментариях.
Демо СкачатьHTML
<article> <section id="a"> <h2>A</h2> <a href="#a">Перейти к A</a> <a href="#b">Перейти к B</a> <a href="#c">Перейти к C</a> <a href="#d">Перейти к D</a> </section> <section id="b"> <h2>B</h2> <a href="#a">Перейти к A</a> <a href="#b">Перейти к B</a> <a href="#c">Перейти к C</a> <a href="#d">Перейти к D</a> </section> <section id="c"> <h2>C</h2> <a href="#a">Перейти к A</a> <a href="#b">Перейти к B</a> <a href="#c">Перейти к C</a> <a href="#d">Перейти к D</a> </section> <section id="d"> <h2>D</h2> <a href="#a">Перейти к A</a> <a href="#b">Перейти к B</a> <a href="#c">Перейти к C</a> <a href="#d">Перейти к D</a> </section> </article>
CSS
@import url(http://fonts.googleapis.com/css?family=Lato:100,300,400,italic300); *, :before, :after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; margin: 0; padding: 0; } html, body { height: 100%; } article { position: relative; display: block; width: 100%; height: 400px; overflow: hidden; } section { position: absolute; display: block; width: 100%; top: 400px; height: 400px; text-align: center; } #a { background: gold; } #b { background: magenta; } #c { background: olive; } #d { background: dodgerblue; } h2 { font: 300 4em/2 'Lato', sans-serif; color: #fff; } a { font: 300 1em/2 'Lato', sans-serif; color: #fff; display: inline-block; padding: 1em; text-decoration: none; border-radius: 4px; margin: .5em; } #a a { background: #e6c200; } #a a:hover { background: #f5ce00; } #b a { background: #e600e5; } #b a:hover { background: #f500f5; } #c a { background: #666700; } #c a:hover { background: #767600; } #d a { background: #0483ff; } #d a:hover { background: #148bff; }
JS
<script src="http://code.jquery.com/jquery-1.11.1.js"></script> <script type="text/javascript"> var zTop = 1; $('a').on('click',function(e){ e.preventDefault(); // Animate up or down based on DOM index var index = $($(this).attr('href')).index(); var wh = $(window).height(); $('section').each(function(){ var $tgt = $(this); var idx = $tgt.index(); $tgt.removeClass(); if(index == idx){ $tgt.stop(true,true).animate({top:0},'linear').addClass('active').css({'z-index':zTop}); } if(index < idx) { $tgt.stop(true,true).animate({top:wh},'linear').addClass('below'); } if(index > idx ){ $tgt.stop(true,true).animate({top:-wh},'linear').addClass('above'); } }); zTop++; }) // Trigger first section animation $('a[href="#a"]').trigger('click'); // Set height $(window).on('resize',function(){ var wh = $(window).height(); $('article, section').height(wh); $('.active').css({top:0}); $('.above').css({top:-wh}); $('.below').css({top:wh}); }).trigger('resize'); </script>
Обзор
Проголосуйте за урок
Оценка
Итог : Уважаемые читатели! Если вам понравилась статья не поленитесь проголосовать и оставить комментарий, ведь так я смогу понять полезность уроков и статей, и улучшить их качество в будущем. Заранее спасибо!
Не знаю как проголосовать, но статья замечательная! Большое спасибо 🙂
Спасибо за отзыв, очень рад что пригодилось!
круто че
скролл полезный,но как скорость прокрутки изменить и что делать с js?
Скорость прокрутки изменить очень просто, для этого нужно чуточку изменить часть скрипта:
if(index == idx){ $tgt.stop(true,true).animate({top:0},1000,’linear’).addClass(‘active’).css({‘z-index’:zTop}); }
if(index < idx) { $tgt.stop(true,true).animate({top:wh},1000,'linear').addClass('below'); } if(index > idx ){ $tgt.stop(true,true).animate({top:-wh},1000,’linear’).addClass(‘above’); }
});
Числовые значения 1000 в коде выше, и есть значение скорости прокрутки.
Вот ссылка на рабочий демо пример: http://jsfiddle.net/dfw06ztf/
Как сделать чтобы доже самое срабатывало не при клике ,а при скролинге колесиком?
Рекомендую обратить внимание на схожее и уже готовое решение http://alvarotrigo.com/fullPage/
Спасибо,это видел. Этот вариант не подошел.=(
Спасибо за статью! Вопрос есть один. 🙂 Как сделать так, чтоб переход по якорям производился по нажатию одной и той же кнопки. Т.е. есть стрелка вверх и вниз. и имеется 5
жмеш на кнопку вниз и он переходит на . еще раз нажал и и т.д.
А если жмешь вверх, то наоборот. Можете подсказать? Заранее спасибо!
Скажите как новичку, а куда надо вписывать вот этот код js и что еще добавить в страницу.
Благодарю за ответ.
Добавьте код перед тегом
Спасибо-спасибо) разобралась!
Добрый день! Не подскажите куда добавить JS в тему wordpress, не могу найти заранее спасибо
А есть пример, чтобы меню было справа символами? Видела на сайтах некоторых. demo.massivedynamic.co/landing/?. Может есть уже где-то в готовое решение?
Добрый день, я новичок, мне не необходимо сделать такую навигацию. Вот только я не могу понять куда вставлять эти коды и как вообще это сделать???
а кто работал с divi builder? на нем как сделать такую прокрутку?
Добрый вечер, подскажите пожалуйста как подключить такую же кнопку скроллинга с анимацией. как на данном сайте( https://www.ulovanet.ru/#av_section_2 ), как только заходишь на сайт! Вот пример кнопки. стрелочка плавно показывает, что внизу тоже есть информация!
Спасибо зарание за внимание!
Как сделать, что бы с button-ом тоже работал. У меня меню через них реализованно, а не через ссылки.
Делаю дипломный проект, столкнулся с проблемой.
http://www.fr13263.rinethost.ru/01/ на данном сайте, при нажатии на якорь, фотография с заголовком спускается вниз. как решить данную проблему?
Блин, где все эти файлы куда можно прописать и добавить? На платной теме WP, ни в одном файле не нашел своих работающих якорей, хочу реализовать плавную, но куда добавить ссылку? Ни в одном файле php нет моих якорей. А в коде страницы есть. Подскажите пожалуйста новичку, как быть?