Плавный скроллинг / Скрипты / Сниппеты Bootstrap

Версия: v1.0

Каталог: Сниппеты Bootstrap

Категория: Скрипты

Bootstrap: 3, 4

Для CMS: HTML, Drupal, Joomla, uCoz, WordPress, Magento, OpenCart, PrestaShop

Язык: Русский

Уникальный ID: 1228

Количество символов:

Посмотрели: 6934 раз

Помощь: установка & настройка

Прокомментировали: 0 раз

Рейтинг: 5.0 / 5 - 3 голосов

Тип лицензии: CC BY 4.0

Авторство: bootstraptema.ru

Информация: Пользователям

Информация: Правообладателям

Теги: Скрипт, Script, Snippet, Smooth Scroll, сниппет, Bootstrap, скроллинг, jQuery, html

Поделился: BootstrapТема

Добавлено: 2016-08-22 в 21:38

Метка: 1581111011

⇄ ⇅

<nav class="navbar navbar-default navbar-fixed-top">
 <div class="container">
 <div class="navbar-header">
 <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
 <span class="sr-only">Toggle navigation</span>
 <span class="icon-bar"></span>
 <span class="icon-bar"></span>
 <span class="icon-bar"></span>
 </button>
 <a class="navbar-brand" href="#">Smooth Scroll</a>
 </div>
 <div id="navbar" class="navbar-collapse collapse">
 <ul class="nav navbar-nav">
 <li><a href="#one">Первый раздел</a></li>
 <li><a href="#two">Второй раздел</a></li>
 <li><a href="#tree">Третий раздел</a></li>
 </ul>
 </div>
 </div>
</nav>

<div class="container">
<div class="row">
<div class="col-md-12">
<h1 class="text-center" id="top">Smooth Scroll + Margin Top</h1>
<h2 class="text-center" id="one">Первый раздел</h2>
<h3>Скрипт плавного скроллинга</h3>
<p>При нажатии на ссылку якорь, например: <code>&lt;a href="#one"&gt;Первый раздел&lt;/a&gt;</code>.</p>
<p>Элемент с аналогичным именем идентификатора, например: <code>&lt;h2 class="text-center" id="one"&gt;Первый раздел&lt;/h2&gt;</code>.</p>
<p>Будет плавно поднят до крайней верхней точки (топа).</p>
<pre><code>
&lt;script&gt;
$(function() {
 $('a[href*=#]:not([href=#])').click(function() {
 if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') &amp;&amp; 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
 }, 1000);
 return false;
 }
 }
 });
});
&lt;/script&gt;
</code></pre>
<blockquote>
Плавность (скорость) подъёма зависит от используемого значения, в примере задано: <code>1000</code>. Чем меньше указано значение, тем выше скорость подъёма контента страницы.
</blockquote>
<h2 class="text-center" id="two">Второй раздел</h2>
<h3>Скрипт плавного скролла с отступом от верхнего края</h3>
<p>Если Вам нужно осуществить подъём элемента с отступом от верхнего края (топа), используйте скрипт, пример которого находится ниже.</p>
<pre><code>
&lt;script&gt;
$(function() {
 $('a[href*=#]:not([href=#])').click(function() {
 if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') &amp;&amp; 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 - 100
 }, 1000);
 return false;
 }
 }
 });
});
&lt;/script&gt;
</code></pre>
<blockquote>
При плавном подъёме элемент будет остановлен с отступом от верхнего края, значение в примере <code>100</code> соответствует <span class="lead">100px</strong>.
</blockquote>
<h2 class="text-center" id="tree">Третий раздел</h2>
<br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br>
<br><p class="top"><a href="#top">&#9650</a></p>

</div>
</div>
</div>

BootstrapTema

Плавный скроллинг

Скриншот

Подробнее

Похожие материалы

Просмотренные материалы

Всего комментариев: 0