Домой / Для сайта / Плавная навигация (прокрутка) страницы до якоря
Плавная навигация (прокрутка) страницы до якоря

Плавная навигация (прокрутка) страницы до якоря

В этом примере я хочу показать вам как создать плавную навигацию (прокрутку) страницы до якоря для вашего сайта. При нажатии на любой из пунктов меню происходит плавный переход без перезагрузки и обновления страницы к заданному блоку или элементу. Такой скролл называют еще «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>
В этом примере я хочу показать вам как создать плавную навигацию (прокрутку) страницы до якоря для вашего сайта. При нажатии на любой из пунктов меню происходит плавный переход без перезагрузки и обновления страницы к заданному блоку или элементу. Такой скролл называют еще "go to". Данный пример вы легко можете применить при создании своего сайта или для улучшения уже существующего проекта. Для того чтобы осуществлялся переход к нужному месту (секции) на сайте, достаточно добавить ссылку на идентификатор нужного блока. Например строчка кода ниже указывает на переход с любой секции сайта в блок B: Идентификатор блока B которого указан&hellip;

Обзор

Проголосуйте за урок

Оценка

Итог : Уважаемые читатели! Если вам понравилась статья не поленитесь проголосовать и оставить комментарий, ведь так я смогу понять полезность уроков и статей, и улучшить их качество в будущем. Заранее спасибо!

Рейтинг: 4.34 ( 36 голосов )
100

20 комментариев

  1. Аватар

    Не знаю как проголосовать, но статья замечательная! Большое спасибо 🙂

  2. Аватар
    джигурда

    круто че

  3. Аватар
    Владимир

    скролл полезный,но как скорость прокрутки изменить и что делать с 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/

  4. Аватар

    Как сделать чтобы доже самое срабатывало не при клике ,а при скролинге колесиком?

  5. Аватар

    Спасибо,это видел. Этот вариант не подошел.=(

  6. Аватар

    Спасибо за статью! Вопрос есть один. 🙂 Как сделать так, чтоб переход по якорям производился по нажатию одной и той же кнопки. Т.е. есть стрелка вверх и вниз. и имеется 5
    жмеш на кнопку вниз и он переходит на . еще раз нажал и и т.д.
    А если жмешь вверх, то наоборот. Можете подсказать? Заранее спасибо!

  7. Аватар

    Скажите как новичку, а куда надо вписывать вот этот код js и что еще добавить в страницу.
    Благодарю за ответ.

  8. Аватар

    Спасибо-спасибо) разобралась!

  9. Аватар
    Евгений

    Добрый день! Не подскажите куда добавить JS в тему wordpress, не могу найти заранее спасибо

  10. Аватар

    А есть пример, чтобы меню было справа символами? Видела на сайтах некоторых. demo.massivedynamic.co/landing/?. Может есть уже где-то в готовое решение?

  11. Аватар
    Николай

    Добрый день, я новичок, мне не необходимо сделать такую навигацию. Вот только я не могу понять куда вставлять эти коды и как вообще это сделать???

  12. Аватар

    а кто работал с divi builder? на нем как сделать такую прокрутку?

  13. Аватар

    Добрый вечер, подскажите пожалуйста как подключить такую же кнопку скроллинга с анимацией. как на данном сайте( https://www.ulovanet.ru/#av_section_2 ), как только заходишь на сайт! Вот пример кнопки. стрелочка плавно показывает, что внизу тоже есть информация!
    Спасибо зарание за внимание!

  14. Аватар
    Александр

    Как сделать, что бы с button-ом тоже работал. У меня меню через них реализованно, а не через ссылки.

  15. Аватар

    Делаю дипломный проект, столкнулся с проблемой.
    http://www.fr13263.rinethost.ru/01/ на данном сайте, при нажатии на якорь, фотография с заголовком спускается вниз. как решить данную проблему?

  16. Аватар
    Новичек WP

    Блин, где все эти файлы куда можно прописать и добавить? На платной теме WP, ни в одном файле не нашел своих работающих якорей, хочу реализовать плавную, но куда добавить ссылку? Ни в одном файле php нет моих якорей. А в коде страницы есть. Подскажите пожалуйста новичку, как быть?

Оставить комментарий

Ваш email не будет опубликован.

*