RSS-подписка

RSS-лента

Новые статьи

Последние комментарии


Получать обновления на эл. почту

Ваш e-mail:

Рассылка новостей от Loco

Плавная прокрутка на странице (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)     Подпишитесь на RSS комментариев к этой статье.