Lightweight Smooth Scroll Plugin For jQuery - Hash Magic
File Size: | 14.8 KB |
---|---|
Views Total: | 5835 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

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.