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

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

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.

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-xx">
...
</section>

</div>

3. Include jQuery library and jQuery Page Scroll To ID plugin at the end of your document.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
<script src="jquery.malihu.PageScroll2id.js"></script> 

4. Call the plugin.

<script>
(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);
</script>

5. All the default settings.

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

$("#nav-menu a,a[href='#top'],a[rel='m_PageScroll2id']").mPageScroll2id({
/* scroll animation speed in milliseconds: Integer */
scrollSpeed:1300,

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

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

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

/* 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,

/* user callback functions: fn */
onStart:function(){},
onComplete:function(){},

/* 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
});
});
})(jQuery);

Change log:

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)

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.