jQuery Plugin For One Page Navigation Plugin - Page Scroll To ID

File Size: 34 KB
Views Total: 48047
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
jQuery Plugin For One Page Navigation Plugin - Page Scroll To ID

Page Scroll To ID is a jQuery plugin to create anchor links which allow you to vertically and horizontally scroll to corresponding sections of your page with custom animations and easing effects.

For each section there's a 'back to top' link and a 'next' link which allows to scroll to next section. Ideal for creating a trendy & pretty one page website layout. Check the demo pages in the zip for more advanced usages.

See also:

More Examples:

You might also like:

Basic Usage:

1. Create a set of anchor links with href attribute pointing to the corresponding ID of your sections.

<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 jQuery library and jQuery Page Scroll To ID plugin at the end of your document.

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

4. Invoke 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 the 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 specific position within the document.

$.mPageScroll2id("scrollTo","#id");

Changelog:

v1.6.8 (2021-02-26)

  • Removed jQuery 1.x deprecated functions

v1.6.7 (2021-02-11)

v1.6.6 (2021-02-01)

  • Update

v1.6.5 (2020-08-17)

  • Fixed Uncaught TypeError of undefined data (e.g. when inside an iframe)

v1.6.3 (2019-10-02)

  • Updated

v1.6.2 (2019-05-29)

  • Updated

v1.6.1 (2019-05-28)

  • Fixed dynamic elements

v1.6.0 (2019-05-01)

  • Update plugin to version 1.6.0

v1.5.9 (2018-10-01)

  • Plugin now works with anchors inside SVG elements.

v1.5.8 (2017-05-31)

  • Fixed a bug regarding links with URL in non-latin characters (e.g. Greek, Cyrillic etc.).

v1.5.7 (2017-02-09)

  • Fixed a bug regarding ps2id-speed-VALUE class.

v1.5.6 (2017-01-12)

  • webkit bug fixed (not scrolling when script is included in head tag)

v1.5.5 (2016-08-01)

  • update

v1.5.4 (2014-10-08)

  • update

v1.5.3 (2014-09-17)

  • update

v1.5.2 (2014-05-19)

  • update

v1.5.1 (2014-01-16)

  • Extended offset option, added offset data attribute, changed license to MIT.

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