Animated Page Scrolling To Specific ID Within Document With jQuery

Page Scroll To ID is a jQuery plugin for creating anchor links that allow you to scroll vertically and horizontally to the corresponding sections of your page using custom animations and smoothing effects.

For each section, there is a “back to top” link and a “next” link that allows scrolling to the next section. Ideal for creating a beautiful, modern one-page website layout. Check out the demo pages in zipping for more advanced uses.

Features

Auto-adjustable animation speed
Advanced animation relaxation
Vertical and/or horizontal scrolling
Highlight your links and goals with ready-to-use chapters
Scroll to automatically adjustable mode
Advanced shifting to scroll position (in pixels, by element selector, linking offsets specified, etc.)

How to make use of it:

1. Create a set of anchor links with the href attribute indicating the identifier corresponding to your departments.

<nav id="nav-menu">
  <ul>
    <li><a href="#section-1">Section 1</a></li>
    <li><a href="#section-2">Section 2</a></li>
    <li><a href="#section-3">Section 3</a></li>
  ...
</ul>

2. Create the main content.

<div id="content">

  <section id="section-1">
    <div class="content">
      <h2>Section 1</h2>
      Your Content Goes Here
      <hr />
      <a href="#top">&uarr; Back to top</a> <a href="#" rel="next">&darr; Next section</a> 
    </div>
  </section>

  <section id="section-2">
    <div class="content">
      <h2>Section 2</h2>
      Your Content Goes Here
      <hr />
      <a href="#top">&uarr; Back to top</a> <a href="#" rel="next">&darr; Next section</a> 
    </div>
  </section>

  <section id="section-3">
    <div class="content">
      <h2>Section 3</h2>
      Your Content Goes Here
      <hr />
      <a href="#top">&uarr; Back to top</a> <a href="#" rel="next">&darr; Next section</a> 
    </div>
  </section>

  ...

  <section id="section-x">
    <div class="content">
      <h2>Section x</h2>
      Your Content Goes Here
      <hr />
      <a href="#top">&uarr; Back to top</a> <a href="#" rel="next">&darr; Next section</a> 
    </div>
  </section>

</div>

3. Include the jQuery library and jQuery Page and scroll to the ID plugin at the end of the document.

<script src="/path/to/jquery.min.js"></script> 
<script src="/path/to/jquery.malihu.PageScroll2id.js"></script>

4. Call the plugin with options.

(function($){
  $(window).load(function(){

    $("#nav-menu a,a[href='#top'],a[rel='m_PageScroll2id']").mPageScroll2id({
      highlightSelector:"#nav-menu a"
    });

    $("a[rel='next']").click(function(e){
      e.preventDefault();
      var to=$(this).parent().parent("section").next().attr("id");
      $.mPageScroll2id("scrollTo",to);
    });

  });
})(jQuery);

5. All default settings and callback functions.

$("Selector").mPageScroll2id({

  /* scroll animation speed in milliseconds: Integer */
  scrollSpeed:1000,

  /* auto-adjust animation speed (according to target element position and window scroll): Boolean */
  autoScrollSpeed:true,

  /* scroll animation easing when page is idle: String */
  scrollEasing:"easeInOutQuint",

  /* scroll animation easing while page is scrolling: String */
  scrollingEasing:"easeOutQuint",

  /* end of page "smooth scrolling" (auto-adjust the scroll-to position when bottom elements are too short): Boolean */
  pageEndSmoothScroll:true,

  /* 
  page layout defines scrolling direction: String 
  values: "vertical", "horizontal", "auto" 
  */
  layout:"vertical",

  /* extra space in pixels for the target element position: Integer */
  offset:0,

  /* highlight the main/default selectors or insert a different set: Boolean, String */
  highlightSelector:false,

  /* class of the clicked element: String */
  clickedClass:pluginPfx+"-clicked",

  /* class of the current target element: String */
  targetClass:pluginPfx+"-target",

  /* class of the highlighted element: String */
  highlightClass:pluginPfx+"-highlight",

  /* force a single highlighted element each time: Boolean */
  forceSingleHighlight:false,

  /* keep element highlighted until next (one element always stays highlighted): boolean */
  keepHighlightUntilNext:false,

  /* highlight elements according to their target and next target position (useful when targets have zero dimensions). Non "auto" layouts only: boolean */
  highlightByNextTarget:false,

  /* disable plugin below [x,y] screen size: boolean, integer, array ([x,y]) */
  disablePluginBelow:false,

  /* enable/disable click events for all selectors */
  clickEvents:true,

  /* append hash to URL/address bar */
  appendHash:false,

  /* enable/disable the default selector: Boolean */
  defaultSelector:false,

  /* highlight elements now and in the future */
  live:true,

  /* set specific live selector(s): String */
  liveSelector:false,
  
  /* user callback functions: fn */
  onStart:function(){},
  onComplete:function(){}

});

6. Scroll the page to a specified location within the document.