ScrollSpy (<b:scrollSpy />)since 0.8.5

<b:scrollSpy> is a wrapper of the native bootstrap scrollspy function which links a menu to the content of a scrollable page. The standard behavior is that a menu jumps to another page or to a certain position within the current page. /lt;b:scrollSpy /> adds the backward link. As you scroll through a page, the menu is updated when you enter a section of the page which can be reached by clicking a menu entry.

Menu entries and document sections are linked via the id of the section. You can jump to a section of the current of by defining a menu entry with a fragment URL, such as href="#firstSection".

BootsFaces also adds AJAX to this feature.You can define an action listener in the backend JSF bean receiving the name of current highlighted section via AJAX.

Is very important that the section you're using as a scroll container has the CSS position property set to "relative". In most cases this scroll container is the <h:body />. Make sure to set the attributes height and the overflow-y:scroll if using another scroll container than <h:body />.

Basic usage

Using the scrollspy requires three simple steps:

  • Add an id to each section you want to link with a menu entry.
  • Use fragment URLs in the menu so you can jump to each section by clicking the menu.
  • Add an id to the menu.
  • Provide the backward link by adding the <b:scrollSpy /> and passing it the id of the menu.

Section 1

Click on the different Section links in the navbar to see the smooth scrolling effect.

Section 2

Click on the different Section links in the navbar to see the smooth scrolling effect.

Section 3

Click on the different Section links in the navbar to see the smooth scrolling effect.

Section 4 Submenu 1

Click on the different Section links in the navbar to see the smooth scrolling effect.

Section 4 Submenu 2

Click on the different Section links in the navbar to see the smooth scrolling effect.


Also try our full screen example.


Reference section

Attributes of <b:scrollSpy >
Attribute Default value Description
auto-update
autoUpdate (alternative writing)		 false Setting this flag updates the widget on every AJAX request.
container (none) Id of the element that is the scrollable container. Search expressions are allowed if they yield only one result. If not specified, body is set by default.
id (none) Unique identifier of the component in a namingContainer.
offset 0 Scroll offset
rendered false Boolean value to specify the rendering of the component, when set to false the component will not be rendered.
selection-listener
selectionListener (alternative writing)		 (none) Selection listener called on selection changed.
smooth false Enable smooth scroll
smoothSpeed 800 Speed of the smooth scroll (default 800)
target (none) Id of the navigation target. Usually the id of the NavBar component. Search expressions are allowed if they yield only one result. If not specified, component with .navbar class is set.
update (none) Component(s) to be updated with ajax.