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

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

В этом примере я хочу показать вам как создать плавную навигацию (прокрутку) страницы до якоря для вашего сайта. При нажатии на любой из пунктов меню происходит плавный переход без перезагрузки и обновления страницы к заданному блоку или элементу. Такой скролл называют еще «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.54 ( 21 голосов )
100

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

  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, не могу найти заранее спасибо

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

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

*