Author: | ederssouza |
---|---|
Views Total: | 121 views |
Official Page: | Go to website |
Last Update: | October 14, 2023 |
License: | MIT |
Preview:

Description:
A lightweight pure JavaScript scrollspy library that enables the navigation links to smoothly scroll between page sections with scrollspy support.
How to use it:
Download and include the scrollspy.js library at the bottom of the webpage.
<script src="src/js/scrollspy.js"></script>
Create the navigation and its corresponding sectioned contents.
<nav class="navbar"> <ul> <li><a class="active" href="#home" title="Home">Home</a></li> <li><a href="#portfolio" title="Portfolio">Portfolio</a></li> <li><a href="#about" title="About">About</a></li> <li><a href="#contact" title="Contact">Contact</a></li> </ul> </nav> <section id="home" class="page"> <div class="container"> <h2>Home</h2> </div> </section> <section id="portfolio" class="page"> <div class="container"> <h2>Portfolio</h2> </div> </section> <section id="about" class="page"> <div class="container"> <h2>About</h2> </div> </section> <section id="contact" class="page"> <div class="container"> <h2>Contact</h2> </div> </section>
Initialize the scrollspy library. That’s it.
var menu = document.querySelector('.navbar'); scrollSpy(menu);
Style the active menu item in the CSS:
.navbar a.active { color: #fff; line-height: 50px; text-decoration: none; }
Override the default scroll speed.
scrollSpy(menu,2000);
Apply an easing effect to the smooth scroll.
// 'easeOutSine', 'easeInOutSine' or 'easeInOutQuint', default value easeInOutQuint scrollSpy(menu, 2000, 'easeInOutQuint');
Changelog:
10/14/2023
- v3.0.8: Bugfixes
Hi! Thanks you very much.
I have a question, how does this works in a mobile?