sKroll
jQuery scrollable navigation without ID's
See the Demo
Getting Started
Insert the sKroll.min.css into your head section
<link type="text/css" rel="stylesheet" href="src/sKroll.min.css">and the sKroll.min.js before the closing body tag
<script type="text/javascript" src="src/sKroll.min.js"></script>Finally initialize the script after the sKroll.min.js file with:
<script type="text/javascript"> $('#skroll').sKroll(); </script>To have full window height sections, you can set the parameter fullHeightSection to true
<script type="text/javascript"> $('#skroll').sKroll({ fullHeightSection: true }); </script>###Usage Just insert a HTML list with a wrapper class 'skroll-header'
<div class="skroll-header"> <ul> <li><a href="#">Home</a></li> <li><a href="#">Blog</a></li> <li><a href="#">Contact</a></li> <li><a href="#">Imprint</a></li> </ul> </div>The content are section tags with the wrapper class 'skroll-content'
<div class="skroll-content"> <section> <h2>Home</h2> </section> <section> <h2>Blog</h2> </section> <section> <h2>Contact</h2> </section> <section> <h2>Imprint</h2> </section> </div>To not allow an element to scroll to a section, please add the class 'no-skroll' into the list element.
<div class="skroll-header"> <ul> ... <li><a href="#" class="no-skroll">Imprint</a></li> </ul> </div>
