Bootstrap Scrollspy - Bootstrap Tutorial
Bootstrap Scrollspy
- Scrollspy is used to automatically update links in a navigation list based on scroll position.
- If you’re building our JavaScript from source, it requires util.js.
- It must be used on a Bootstrap nav component or list group. It requires position: relative; on the element you’re spying on, usually the <body>.
- When spying on elements other than the <body>, be sure to have a height set and overflow-y: scroll; applied.
- Anchors (<a>) are required and must point to an element with that id.
- When successfully implemented, your nav or list group will update accordingly, moving the .active class from one item to the next based on their associated targets.
Sample Code
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="https://getbootstrap.com/docs/5.2/assets/css/docs.css" rel="stylesheet">
<title>Bootstrap Example</title>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>
</head>
<body class="p-3 m-0 border-0 bd-example">
<div class="bd-example">
<nav id="navbar-example2" class="navbar bg-light px-3 mb-3">
<a class="navbar-brand" href="#">Navbar</a>
<ul class="nav nav-pills">
<li class="nav-item">
<a class="nav-link" href="#scrollspyHeading1">First</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#scrollspyHeading2">Second</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button" aria-expanded="false">Dropdown</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#scrollspyHeading3">Third</a></li>
<li><a class="dropdown-item" href="#scrollspyHeading4">Fourth</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#scrollspyHeading5">Fifth</a></li>
</ul>
</li>
</ul>
</nav>
<div class="scrollspy-example bg-light p-3 rounded-2" data-bs-spy="scroll" data-bs-target="#navbar-example2" data-bs-root-margin="0px 0px -40%" data-bs-smooth-scroll="true" tabindex="0">
<h4 id="scrollspyHeading1">HTML</h4>
<p>HTML - Hyper Text Markup Language. HTML is a typical markup language used for building a web pages. The word "Markup" means a language with particular syntax which instructs a Web browser to how the page needs to display.</p>
<h4 id="scrollspyHeading2">CSS</h4>
<p>CSS stands for Cascading Style Sheets. CSS defines how HTML elements are to be displayed on screen or in other media. CSS stores a considerable measure of work.
It can control the format of various website pages at the same time. External style sheets are stored in CSS files. CSS is utilized to control the style of a web report in a straightforward and simple way.</p>
<h4 id="scrollspyHeading3">JS</h4>
<p>JavaScript Arrays: Acces process objects arrays or json. Append something to an array. Array contains a value. Array elements at beginning. Best way to find if an item is in a javascript array. Check if object is array. Copying array by value in javascript.</p>
</div>
</body>
</html>
Output
Bootstrap Scrollspy Nested nav
- Scrollspy also works with nested .navs. If a nested .nav is .active, its parents will also be .active.
- Scroll the area next to the navbar and watch the active class change.
Sample Code
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="https://getbootstrap.com/docs/5.2/assets/css/docs.css" rel="stylesheet">
<title>Bootstrap Example</title>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>
</head>
<body class="p-3 m-0 border-0 bd-example">
<div class="bd-example">
<div class="row">
<div class="col-4">
<nav id="navbar-example3" class="h-100 flex-column align-items-stretch pe-4 border-end">
<nav class="nav nav-pills flex-column">
<a class="nav-link" href="#item-1">Item 1</a>
<nav class="nav nav-pills flex-column">
<a class="nav-link ms-3 my-1" href="#item-1-1">Item 1-1</a>
<a class="nav-link ms-3 my-1" href="#item-1-2">Item 1-2</a>
</nav>
</nav>
</nav>
</div>
<div class="col-8">
<div data-bs-spy="scroll" data-bs-target="#navbar-example3" data-bs-smooth-scroll="true" class="scrollspy-example-2" tabindex="0">
<div id="item-1">
<h4>HTML</h4>
<p>HTML - Hyper Text Markup Language. HTML is a typical markup language used for building a web pages. The word "Markup" means a language with particular syntax which instructs a Web browser to how the page needs to display.</p>
<div id="item-1-1">
<h5>CSS</h5>
<p>CSS stands for Cascading Style Sheets. CSS defines how HTML elements are to be displayed on screen or in other media. CSS stores a considerable measure of work.
It can control the format of various website pages at the same time. External style sheets are stored in CSS files. CSS is utilized to control the style of a web report in a straightforward and simple way.</p>
</div>
<div id="item-1-2">
<h5>Item JS</h5>
<p>JavaScript Arrays: Acces process objects arrays or json. Append something to an array. Array contains a value. Array elements at beginning. Best way to find if an item is in a javascript array. Check if object is array. Copying array by value in javascript.</p>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Output
Bootstrap Scrollspy List group
- Scrollspy also works with .list-groups. Scroll the area next to the list group and watch the active class change.
Sample Code
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="https://getbootstrap.com/docs/5.2/assets/css/docs.css" rel="stylesheet">
<title>Bootstrap Example</title>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>
</head>
<body class="p-3 m-0 border-0 bd-example">
<div class="bd-example">
<div class="row">
<div class="col-4">
<div id="list-example" class="list-group">
<a class="list-group-item list-group-item-action" href="#list-item-1">Item 1</a>
<a class="list-group-item list-group-item-action" href="#list-item-2">Item 2</a>
<a class="list-group-item list-group-item-action" href="#list-item-3">Item 3</a>
</div>
</div>
<div class="col-8">
<div data-bs-spy="scroll" data-bs-target="#list-example" data-bs-smooth-scroll="true" class="scrollspy-example" tabindex="0">
<h4 id="list-item-1">HTML</h4>
<p>HTML - Hyper Text Markup Language. HTML is a typical markup language used for building a web pages. The word "Markup" means a language with particular syntax which instructs a Web browser to how the page needs to display.</p>
<h4 id="list-item-2">CSS</h4>
<p>CSS stands for Cascading Style Sheets. CSS defines how HTML elements are to be displayed on screen or in other media. CSS stores a considerable measure of work.
It can control the format of various website pages at the same time. External style sheets are stored in CSS files. CSS is utilized to control the style of a web report in a straightforward and simple way.</p>
<h4 id="list-item-3">JS</h4>
<p>JavaScript Arrays: Acces process objects arrays or json. Append something to an array. Array contains a value. Array elements at beginning. Best way to find if an item is in a javascript array. Check if object is array. Copying array by value in javascript.</p>
</div>
</div>
</div>
</div>
</body>
</html>
Output
Bootstrap Scrollspy Simple anchors
- Scrollspy is not limited to nav components and list groups, so it will work on any <a> anchor elements in the current document. Scroll the area and watch the .active class change.
Sample Code
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="https://getbootstrap.com/docs/5.2/assets/css/docs.css" rel="stylesheet">
<title>Bootstrap Example</title>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>
</head>
<body class="p-3 m-0 border-0 bd-example">
<div class="bd-example">
<div class="row">
<div class="col-4">
<div id="simple-list-example" class="d-flex flex-column gap-2 simple-list-example-scrollspy text-center">
<a class="p-1 rounded" href="#simple-list-item-1">Item 1</a>
<a class="p-1 rounded" href="#simple-list-item-2">Item 2</a>
<a class="p-1 rounded" href="#simple-list-item-3">Item 3</a>
</div>
</div>
<div class="col-8">
<div data-bs-spy="scroll" data-bs-target="#simple-list-example" data-bs-offset="0" data-bs-smooth-scroll="true" class="scrollspy-example" tabindex="0">
<h4 id="simple-list-item-1">HTML</h4>
<p>HTML - Hyper Text Markup Language. HTML is a typical markup language used for building a web pages. The word "Markup" means a language with particular syntax which instructs a Web browser to how the page needs to display.</p>
<p></p>
<h4 id="simple-list-item-2">CSS</h4>
<p>CSS stands for Cascading Style Sheets. CSS defines how HTML elements are to be displayed on screen or in other media. CSS stores a considerable measure of work.
It can control the format of various website pages at the same time. External style sheets are stored in CSS files. CSS is utilized to control the style of a web report in a straightforward and simple way.</p>
<h4 id="simple-list-item-3">JS</h4>
<p>JavaScript Arrays: Acces process objects arrays or json. Append something to an array. Array contains a value. Array elements at beginning. Best way to find if an item is in a javascript array. Check if object is array. Copying array by value in javascript.</p>
</div>
</div>
</div>
</body>
</html>
Output
