Домой / Для сайта / Плавная навигация на странице
Плавная навигация на странице

Плавная навигация на странице

Пример реализации плавной прокрутки сайта до якоря. Для того чтобы назначить на любой из пунктов меню свой якорь, создайте блок div и назначьте ему уникальный id. После этого в навигации (меню) укажите ссылку на id блока.

Пример ссылки в меню на якорь блока:

<a href="#defaults">О нас</a>

где #defaults это id блока div «О нас».

Для работы необходимо обязательно подключить библиотеку jQuery.

Посмотреть и скачать демо пример вы можете перейдя по ссылкам ниже.

Демо Скачать

HTML

<div class="wrapper">
    <div class="docs-nav">
        <nav>
            <a href="#get-started" class="active">Главная</a>
            <a href="#defaults">О нас</a>
        </nav>
    </div>
    <div class="docs">
        <div class="docs-wrapper">
            <div id="get-started">
                <h1>Плавная навигация на странице</h1>
                <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
                    Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit
                    amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
                <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
                    Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit
                    amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
                <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
                    Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit
                    amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
                <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
                    Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit
                    amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
                <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
                    Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit
                    amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
                <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
                    Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit
                    amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
                <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
                    Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit
                    amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
                <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
                    Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit
                    amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
                <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
                    Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit
                    amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
                <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
                    Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit
                    amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
                <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
                    Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit
                    amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
                <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
                    Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit
                    amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
                <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
                    Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit
                    amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
                <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
                    Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit
                    amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
                <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
                    Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit
                    amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
                <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
                    Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit
                    amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
                <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
                    Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit
                    amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
                <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
                    Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit
                    amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
                <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
                    Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit
                    amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
                <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
                    Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit
                    amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>

                <div class="defaults" id="defaults">
                    <h1>О нас</h1>
                    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
                        Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero
                        sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
                    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
                        Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero
                        sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
                    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
                        Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero
                        sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
                    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
                        Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero
                        sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
                    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
                        Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero
                        sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
                    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
                        Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero
                        sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
                    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
                        Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero
                        sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
                    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
                        Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero
                        sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
                    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
                        Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero
                        sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
                    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
                        Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero
                        sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
                    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
                        Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero
                        sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
                </div>
            </div>
        </div>
    </div>
</div>

CSS

*,
*:before,
*:after {
 box-sizing: border-box;
}
html,
body {
 padding: 0;
 margin: 0;
 font-family: 'source sans pro';
 height: 100%;
 width: 100%;
 font-size: 1rem;
 line-height: 1.3125;
 -webkit-font-smoothing: antialiased;
 /* Fix for webkit rendering */
 font-smoothing: antialiased;
 -webkit-text-size-adjust: 100%;
 font-weight: 400;
}
a {
 text-decoration: none;
 transition: all .25s ease;
}
hr {
 height: 1px;
 border-top: 1px solid #ccc;
 border-left: transparent;
 border-right: transparent;
 border-bottom: transparent;
 margin: 1.3125rem 0;
}
.wrapper {
 position: relative;
 height: 100%;
}
.docs-nav {
 width: 20%;
 background-color: #1f1f1f;
 height: 100%;
 position: fixed;
 top: 0;
 left: 0;
 float: left;
}
#frame,
#get-started {
 padding-top: 3%;
}
.docs-nav a {
 color: rgba(255, 255, 255, 0.7);
 padding: 1rem;
 display: block;
 text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);
 border-left: 5px solid transparent;
}
.docs-nav a:hover {
 background-color: #000000;
}
.docs-nav a.active {
 background-color: #34c1db;
 color: #ffffff;
 font-weight: 700;
}
.docs {
 float: left;
 width: 80%;
 margin-left: 20%;
}
.docs-wrapper {
 margin-left: auto;
 margin-right: auto;
 display: inline-block;
 width: 100%;
 padding: 0 15%;
}
h1,
h2,
h3,
h4,
h5,
h6 {
 margin: 1.3125rem 0;
 margin-bottom: 0;
}
p {
 margin: 1.3125rem 0;
 color: #333;
}
h1 {
 font-weight: 300;
}
p.lead,
.lead {
 font-size: 1.3125rem;
}
ul,
ol {
 margin: 0;
 list-style: none;
 padding: 0;
}

JS

$('nav &amp;gt; a').on( 'click', function(e){
 $('a.active').removeClass('active');
 $(this).addClass('active');
});

$('a[href*=#]:not([href=#])').click(function() {
 if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') || location.hostname == this.hostname) {
 var target = $(this.hash);
 target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
 if (target.length) {
 $('html,body').animate({
 scrollTop: target.offset().top
 }, 700);
 return false;
 }
 }
});
Пример реализации плавной прокрутки сайта до якоря. Для того чтобы назначить на любой из пунктов меню свой якорь, создайте блок div и назначьте ему уникальный id. После этого в навигации (меню) укажите ссылку на id блока. Пример ссылки в меню на якорь блока: где #defaults это id блока div "О нас". Для работы необходимо обязательно подключить библиотеку jQuery. Посмотреть и скачать демо пример вы можете перейдя по ссылкам ниже. HTML &lt;div class=&quot;wrapper&quot;&gt; &lt;div class=&quot;docs-nav&quot;&gt; &lt;nav&gt; &lt;a href=&quot;#get-started&quot; class=&quot;active&quot;&gt;Главная&lt;/a&gt; &lt;a href=&quot;#defaults&quot;&gt;О нас&lt;/a&gt; &lt;/nav&gt; &lt;/div&gt; &lt;div class=&quot;docs&quot;&gt; &lt;div class=&quot;docs-wrapper&quot;&gt; &lt;div id=&quot;get-started&quot;&gt; &lt;h1&gt;Плавная навигация на странице&lt;/h1&gt; &lt;p&gt;Pellentesque habitant morbi&hellip;

Обзор

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

Оценка

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

Рейтинг: 4.82 ( 3 голосов )
100

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

  1. Аватар

    Большое спасибо за скрипт, в сети дофига инфы про плавный скролинг с планином ScrollTo, но с использованием древнего JQuery. У меня на 1.11.1 не шло, а с этим скриптом все красиво)

  2. Аватар

    Не подскажите как сместить это меню вниз, чтобы вставить шапку сайта?

    • Аватар

      Все очень просто.
      Вставьте html код:

      <div id="header">
            <h1>Место для хедера</h1>
            <img src="http://marketplace.1c-bitrix.ru/upload/resize_cache/update/556/128_128_175511db9cefbc414a902a46f1b8fae16/gotowebinar_logo.png"/>
      </div>
      

      между

      <div class="docs-nav"> и <nav>

      Ну и для теста несколько новых стилей в CSS:

      #header {
      	text-align: center;
      }
      #header h1 {
      	margin: 15px;
      	color: #ccc;
      }
      

      Вот ссылка на демо того, что получилось: http://jsfiddle.net/4xz49txm/

  3. Аватар

    Приветствую,Александр.
    Можно сделать так, чтобы навигация была только на выборочных страницах сайта?

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

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

*