Плавная прокрутка на странице (Bootstrap JS Scrollspy)
На одностраничных лендингах красиво сделать плавный переезд при нажатии на пункт меню. Вот как просто это делается в BootstrapДля тех, у кого Bootstrap, используем его плагин Scrollspy.
1. Вариант через атрибуты data-*
Добавляем data-spy="scroll"к элементу, по которому идёт прокрутка. Часто это сам <body> и есть.
Дальше добавляем атрибут data-target с указанием id или class навигационного меню со ссылками (.navbar). Это связывет навигацию (.navbar) со скроллируемой областью (body).
ID ссылок в меню навигации должны совпадать с id блоков, на которые ведёт скролл. Это и есть ссылка-якорь или анкор. <div id="section1"> соответствует <a href="#section1">
Необязательный атрибут data-offsetпоказывает смещение в пикселях от начала элемента, когда вычисляется позиция, куда нужно проскролиться. По-умолчанию 10 пикселям.
<!-- The scrollable area -->
<body data-spy="scroll" data-target=".navbar" data-offset="50">
<!-- The navbar - The <a> elements are used to jump to a section in the scrollable area -->
<nav class="navbar navbar-inverse navbar-fixed-top">
...
<ul class="nav navbar-nav">
<li><a href="#section1">Section 1</a></li>
...
</nav>
<!-- Section 1 -->
<div id="section1">
<h1>Section 1</h1>
<p>Try to scroll this page and look at the navigation bar while scrolling!</p>
</div>
...
</body>
2. Вручную подключить javascript-код
$('body').scrollspy({target: ".navbar"})
almix
Разработчик Loco, автор статей по веб-разработке на Yii, CodeIgniter, MODx и прочих инструментах. Создатель Team Sense.
Вы можете почитать все статьи от almix'а.
- 0 Yii: Bootstrap tabs, делаем активной вкладку на которую выполняется переход по ссылке (20.03.2014)
- 0 CodeIgniter: Всплывающая форма обратной связи на Ajax в Bootstrap Modal и проверкой Captcha (18.02.2014)
- 0 Opencart: Модуль Filter Product OpenCart_v1.5.x: Как скрывать недоступные опции в фильтре (23.10.2013)
- 0 Twitter Bootstrap Carousel Crossfade (09.09.2013)
- 0 Inline-block vs float (22.08.2013)
- 0 Список li в две колонки (CSS) (13.03.2013)
- 0 WordPress: Добавить ссылку "Сохранить фото" для галереи на NextGen с эффектом Lightbox (12.04.2013)
- Оборачиваем изображения в ссылки с помощью хука add_filter('the_content', ...) в functions.php (14.08.2019)
- Добавляем форму отправки обратного звонка на сайт (по Javascript и с ReCaptcha) (29.07.2019)
- Java-скрипт работа с css-свойствами (09.03.2019)
- Две или более reCaptcha на одной странице. Несколько рекапч на странице (25.02.2019)
- Оверлей кнопка на видео HTML5 video overlay play button (15.02.2019)
- Javascript: Выводим прелоадер пока ожидаем выполнение скрипта php (29.01.2019)
- Flip-вращалка на css. Эффект кручения карточки на обратную сторону (25.10.2018)
- Выравниваем div по-центру другого div в меню Bootstrap (12.10.2018)
- Плавная прокрутка на странице (Bootstrap JS Scrollspy) (12.10.2018) ← вы тут
- Настраиваем красивое меню типа гамбургер на мобильных, используя плагин mmenu. На примере 1С-Битрикс (04.02.2018)
- Выдвигающаяся из значка форма поиска на сайте (27.11.2017)
- Выравниваем div внутри другого div по центру (27.11.2017)
- Пробелы между пунктами меню (16.11.2017)
- Как убрать placeholder при клике по input (04.11.2017)
- Свой дизайн кнопок социальных сетей для сайта. Кнопки "Поделиться" (19.06.2017)
- Выравнивание изображения по центру в Bootstrap (11.12.2016)
- Загрузка файлов (картинок) по ajax через форму для Opencart (04.09.2016)
- Замена текста при наведении на него мышью. События onmouseover и onmouseout (25.03.2016)
RSS комментариев к этой статье.
