Lightweight Smooth Scroll Plugin For jQuery - Hash Magic

Hash Magic is a lightweight jQuery plugin for creating a smooth one page scrolling website with support for hashChange event. The navigation menu is automatically updated as the user scroll up/down the webpage manually.

How to use it:

1. Create a one page scroll navigation.

<nav class="navbar">
  <div class="inner">
    <ul class="navbar-list">
      <li class="navbar-item"><a href="#section-1">Section 1</a></li>
      <li class="navbar-item"><a href="#section-2">Section 2</a></li>
      <li class="navbar-item"><a href="#section-3">Section 3</a></li>
      <li class="navbar-item"><a href="#section-4">Section 4</a></li>
    </ul>
  </div>
</nav>

2. Create content sections with data-anchor attributes pointing to the corresponding hash tags.

<div class="container">
  <section data-anchor="section-1" class="section">
    <h2 class="section-title">Section 1</h2>
  </section>
  <section data-anchor="section-2" class="section">
    <h2 class="section-title">Section 2</h2>
  </section>
  <section data-anchor="section-3" class="section">
    <h2 class="section-title">Section 3</h2>
  </section>
  <section data-anchor="section-4" class="section">
    <h2 class="section-title">Section 4</h2>
  </section>
</div>

3. The sample CSS styles.

.navbar {
  position: fixed;
  top: 0;
  width: 100%;
  height: 44px;
  line-height: 44px;
  z-index: 10000;
  padding: 0 10px;
  background-color: #FFFFFF;
  box-shadow: 1px 0 2px #ABB8C2;
}

.navbar > .inner {
  display: block;
  height: 100%;
}

.navbar-list { display: table; }

.navbar-list > .navbar-item { display: table-cell; }

.navbar-list > .navbar-item > a {
  display: block;
  height: 44px;
  padding: 0 1rem;
  font-weight: 600;
  color: #66757F;
}

.navbar-list > .navbar-item > a:hover,
.navbar-list > .navbar-item > a.active { border-bottom: 3px solid #ABB8C2; }

.navbar-list > .navbar-item > h1 { display: inline-block; }

.navbar-list > .navbar-item > h1 > a {
  display: inline-block;
  margin-right: 1rem;
  color: #ABB8C2;
}

.navbar-list > .navbar-item > h1 > a:hover { opacity: 0.75; }

.container { height: 100%; }

.section {
  position: relative;
  height: 100%;
  min-height: 500px;
  text-align: center;
}

.section > .section-title {
  position: absolute;
  top: 50%;
  width: 100%;
  margin-top: -2rem;
  font-size: 4rem;
  line-height: 1;
  color: white;
  text-transform: uppercase;
}

4. Load jQuery library and the jQuery hash magic plugin at the bottom of the web page.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="js/jquery.hash-magic.min.js"></script>

---

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