Anchor Based In-page Scroller Plugin For jQuery - localScroll

localScroll is a jQuery plugin that enables the anchor links to navigate between content sections within the document, with a smooth scrolling effect based on the jquery.scrollTo plugin. Ideal for content slider and one page scrolling website. AJAX content is supported as well.

Basic usage:

1. Link to the jQuery library, jQuery.scrollTo and jQuery localScroll.

<script src="//code.jquery.com/jquery.min.js"></script>
<script src="jquery.scrollTo-min.js"></script>
<script src="jquery.localScroll.js"></script>

2. Create a group of web contents you want to navigate through.

<div id="content">
  <div class="section">
    <ul>
      <li class="sub" id="section1">
        <h2>Section 1</h2>
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse et turpis sed metus fermentum pellentesque. Vestibulum auctor neque ac nunc elementum malesuada. Praesent non est sed libero vestibulum consectetuer. Sed vehicula. Vivamus quis tellus sit amet erat ultrices luctus. Fusce a ligula. Fusce viverra libero vitae velit. Aenean bibendum nibh non lorem. Suspendisse quis velit. Integer sit amet lacus. Curabitur tristique. Morbi eu lectus. Vestibulum tristique aliquam quam. Sed neque.</p>
        <p>Nulla facilisi. Quisque eleifend libero. Sed eros. Morbi vel leo. Morbi varius tincidunt sem. Nam sodales volutpat velit. Suspendisse potenti. Duis vehicula pede non nisi. Proin elit pede, ultrices non, ultrices quis, vulputate sit amet, magna. Praesent sodales pellentesque justo. Donec blandit, augue id convallis congue, magna libero hendrerit erat, id blandit est lorem a tellus. Vestibulum tincidunt lectus quis metus. Pellentesque placerat lacus in urna.</p>
        <a href="#section2" class="next">&gt;&gt;</a> </li>
    </ul>
  </div>
  <div class="section">
    <ul>
      <li class="sub" id="section2" >
        <h2>Section 2</h2>
        <p>Nullam et sem eget massa pellentesque dapibus. Nulla sollicitudin enim quis odio. Quisque ipsum lorem, volutpat eget, condimentum ac, posuere id, risus. Suspendisse tortor metus, aliquet in, varius nec, hendrerit a, libero. Suspendisse iaculis. Fusce commodo urna ut enim. Fusce tempus eros. Phasellus sodales tellus id dolor. Integer sollicitudin, turpis ac interdum condimentum, enim enim tempus metus, sed imperdiet massa diam nec elit. Mauris ante augue, hendrerit non, commodo ac, porttitor eu, turpis.</p>
        <p>In fermentum nibh ut diam. Mauris sagittis, tellus ac molestie fermentum, arcu orci pharetra mi, id vehicula massa leo vel pede. Nullam semper tincidunt lorem. Proin arcu libero, auctor sed, interdum egestas, ullamcorper et, lacus. Donec id lectus eget diam accumsan ullamcorper. Donec at urna et lacus condimentum pellentesque. Phasellus dapibus hendrerit massa. Sed sed ipsum. Quisque venenatis. Donec vel turpis. Vivamus quis augue a turpis facilisis facilisis. Pellentesque augue ipsum, bibendum id.</p>
        <a href="#section3" class="next">&gt;&gt;</a> </li>
    </ul>
  </div>
  <div class="section">
    <ul>
      <li class="sub" id="section3">
        <h2>Section 3</h2>
        <p>Aliquam erat volutpat. In a neque. Mauris malesuada consectetuer metus. Etiam molestie. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Integer scelerisque gravida libero. Nulla nisi massa, consequat nec, gravida sit amet, imperdiet in, est. Nam gravida lacus. Etiam sem tortor, faucibus eget, iaculis euismod, molestie consequat, mauris. Phasellus consectetuer lobortis eros. Maecenas sit amet arcu. Morbi ut enim. Fusce sem augue, consectetuer in, tempus eu, dictum vel, felis. Praesent nisl tortor, aliquet a, fermentum ac, molestie vitae, libero.</p>
        <p>Donec lacinia neque et justo. Vestibulum pretium semper tellus. Phasellus lacinia tristique purus. Id, orci. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nulla non orci eu felis accumsan blandit. Nam condimentum. Quisque pulvinar. Cras nibh. Sed quis lorem id erat feugiat vulputate.</p>
        <a href="#section1" class="next">&gt;&gt;</a> </li>
    </ul>
  </div>
</div>

3. Create the anchor links to navigate between the content sections you just created.

<ul id="navigation">
  <li class="sup">
    <a href="#section1">Section 1</a>
  </li>
  <li class="sup">
    <a href="#section2">Section 2</a>
  </li>
  <li class="sup">
    <a href="#section3">Section 3</a>
  </li>
</ul>

4. Call the function to activate the localScroll.

$.localScroll({
  target: '#content'
});

5. Config the localScroll plugin with the following options. You can find more configuration options in the jquery.scrollTo plugin.

$.localScroll({

  // How long to animate.
  duration: 1000, 

  // Which of top and left should be modified.
  axis: 'y', 

  // On which event to react.
  event: 'click', 

  // Avoid queuing animations
  stop: true, 
  
  // If true, applies the scrolling at initial page load.
  autoscroll: true 
  
});

---

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