Fixed Single Page App Navigation Plugin - jQuery scroll2Section

File Size: 120 KB
Views Total: 5476
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
Fixed Single Page App Navigation Plugin - jQuery scroll2Section

The jQuery scroll2Section plugin lets you create a sticky navbar that smoothly scrolls the page to specific content sections while highlighting the current nav item. Created for modern one page scrolling websites and single page web apps. Compatible with Bootstrap 3 and Bootstrap 4 frameworks.

How to use it:

1. Create the navbar and content sections as follows:

<nav class="navbar">

  <ul class="navbar-nav">
    <li class="nav-item active">
      <a class="nav-link" data-section href="#!section-1">Section 1</a>
    <li class="nav-item">
      <a class="nav-link" data-section href="#!section-2">Section 2</a>
    <li class="nav-item">
      <a class="nav-link" data-section href="#!section-3">Section 3</a>
    <li class="nav-item">
      <a class="nav-link" data-section href="#!section-4">Section 4</a>
    <li class="nav-item">
      <a class="nav-link" data-section href="#!section-5">Section 5</a>
<section id="section-1">
  <div class="container">Container section 1</div>

<section id="section-2">
  <div class="container">Container section 2</div>

<section id="section-3">
  <div class="container">Container section 3</div>

<section id="section-4">
  <div class="container">Container section 4</div>

<section id="section-5">
  <div class="container">Container section 5</div>

2. Place both jQuery JavaScript library and the jQuery scroll2Section plugin's script at the bottom of your page.

<script src="" 
<script src="scroll2Section.js"></script>

3. Enable the plugin by calling the function on the content sections. Note that the menu selector can be one or more elements.

  menu:'nav' // target navbar

4. More configuration options.

  • offSetTop: top offset in pixels
  • activeClass: active class
  • activeParent: parent element
  • useAffix: uses affix
  offSetTop: 0,
  activeClass: 'active',
  activeParent: 'li',
  useAffix: false



  • lock on scroll and trigger when complete


  • added useAffix option


  • added body event: visibleSection


  • update: clear href attribute to hash

This awesome jQuery plugin is developed by kiaonline. For more Advanced Usages, please check the demo page or visit the official website.