Scrollspy & Smooth Scroll Library – scrollspy.js

Category: Animation , Javascript , Menu & Navigation | May 26, 2018
Author: ederssouza
Views Total: 4,208
Official Page: Go to website
Last Update: May 26, 2018
License: MIT

Preview:

Scrollspy & Smooth Scroll Library – scrollspy.js

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:

05/26/2018

  • v2.0.2

You Might Be Interested In:


Leave a Reply