<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>pagePiling.js plugin</title>
<meta name="Resource-type" content="Document" />
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Lato:300,400,700" />
<!--[if IE]>
<script type="text/javascript">
var console = { log: function() {} };
</script>
<![endif]-->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="jquery.pagepiling.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
/*
* Plugin intialization
*/
$('#pagepiling').pagepiling({
menu: '#menu',
anchors: ['page1', 'page2', 'page3', 'page4'],
sectionsColor: ['white', '#ee005a', '#2C3E50', '#39C'],
navigation: {
'position': 'right',
'tooltips': ['Page 1', 'Page 2', 'Page 3', 'Pgae 4']
},
afterRender: function(){
$('#pp-nav').addClass('custom');
},
afterLoad: function(anchorLink, index){
if(index>1){
$('#pp-nav').removeClass('custom');
}else{
$('#pp-nav').addClass('custom');
}
}
});
/*
* Internal use of the demo website
*/
$('#showExamples').click(function(e){
e.stopPropagation();
e.preventDefault();
$('#examplesList').toggle();
});
$('html').click(function(){
$('#examplesList').hide();
});
});
</script>
</head>
<body>
<a href="https://github.com/alvarotrigo/pagePiling.js"></a>
<a href="https://twitter.com/share" class="twitter-share-button" data-url="http://alvarotrigo.com/pagePiling/" data-text="Great plugin to create a single scrolling page pagePiling.js: ">Tweet</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
<iframe src="http://ghbtns.com/github-btn.html?user=alvarotrigo&repo=pagePiling.js&type=watch&count=true" allowtransparency="true" frameborder="0" scrolling="0" width="152" height="20" id="starGithub"></iframe>
<ul id="menu">
<li data-menuanchor="page1" class="active"><a href="#page1">Page 1</a></li>
<li data-menuanchor="page2"><a href="#page2">Page 2</a></li>
<li data-menuanchor="page3"><a href="#page3">Page 3</a></li>
<li data-menuanchor="page4"><a href="#page4">Page 4</a></li>
</ul>
<div id="pagepiling">
<div class="section" id="section1">
<h1>pagePiling.js</h1>
<p>Create an original scrolling site</p>
<img src="http://alvarotrigo.com/pagePiling/imgs/pagePiling-plugin.gif" alt="pagePiling" />
<br />
<div id="download"><a href="https://github.com/alvarotrigo/pagePiling.js/archive/master.zip">Download</a></div><br />
<p id="donations">
<a href="http://vk.cc/35R1HD">
Donations will be appreciated!</a></p>
</div>
<div class="section" id="section2">
<div class="intro">
<div id="colors"></div>
<h1>jQuery plugin</h1>
<p>Pile your sections one over another and access them scrolling or by URL!</p>
<div id="markup">
</div>
</div>
</div>
<div class="section" id="section3">
<div class="intro">
<h1>Configurable</h1>
<p>Plenty of options, methods and callbacks to use.</p>
<div id="colors2"></div>
<div id="colors3"></div>
</div>
</div>
<div class="section" id="section4">
<div class="intro">
<h1>Compatible</h1>
<p>Designed to work on tablet and mobile devices.</p>
<p>Oh! And its compatible with old browsers such as IE 8 or Opera 12!</p>
</div>
</div>
</div>
<div id="infoMenu">
<ul>
<li><a href="https://github.com/alvarotrigo/pagePiling.js/archive/master.zip">Download</a></li>
<li>
<a href="http://alvarotrigo.com/pagePiling/" id="showExamples">Examples</a>
<div id="examplesList">
<div class="column">
<h3>Navigation</h3>
<ul>
<li><a href="http://alvarotrigo.com/pagePiling/examples/horizontalScroll.html">Horizontal scroll</a></li>
<li><a href="http://alvarotrigo.com/pagePiling/examples/noAnchor.html">Without anchor links (same URL)</a></li>
<li><a href="http://alvarotrigo.com/pagePiling/examples/looping.html">Looping</a></li>
</ul>
</div>
<div class="column">
<h3>Design</h3>
<ul>
<li><a href="http://alvarotrigo.com/pagePiling/examples/backgrounds.html">Full backgrounds</a></li>
<li><a href="http://alvarotrigo.com/pagePiling/examples/videoBackground.html">Full background videos</a></li>
</ul>
</div>
<div class="column">
<h3>Callbacks</h3>
<ul>
<li><a href="http://alvarotrigo.com/pagePiling/examples/callbacks.html">Callbacks</a></li>
</ul>
</div>
</div>
</li>
<li><a href="https://github.com/alvarotrigo/pagePiling.js#pagepilingjs">Documentation</a></li>
<li><a href="http://alvarotrigo.com/#contact-page">Contact</a></li>
</ul>
</div>
</body>
*JS**
1
/* ===========================================================
2
* pagepiling.js 0.0.8 (Beta)
3
*
4
* https://github.com/alvarotrigo/pagePiling.js
5
* MIT licensed
6
*
7
* Copyright (C) 2014 alvarotrigo.com - A project by Alvaro Trigo
8
*
9
* ========================================================== */
10
11
(function(b){b.fn.pagepiling=function(c){function A(a){var c=b(".pp-section.active").index(".pp-section");a=a.index(".pp-section");return c>a?"up":"down"}function g(a,f){var d={destination:a,animated:f,activeSection:b(".pp-section.active"),anchorLink:a.data("anchor"),sectionIndex:a.index(".pp-section"),toMove:a,yMovement:A(a),leavingSection:b(".pp-section.active").index(".pp-section")+1};d.activeSection.is(a)||("undefined"===typeof d.animated&&(d.animated=!0),"undefined"!==typeof d.anchorLink&&c.anchors.length&am...
....
28
"#pp-nav a",function(a){a.preventDefault();a=b(this).parent().index();g(b(".pp-section").eq(a))});b(document).on({mouseenter:function(){var a=b(this).data("tooltip");b('<div class="pp-tooltip '+c.navigation.position+'">'+a+"</div>").hide().appendTo(b(this)).fadeIn(200)},mouseleave:function(){b(this).find(".pp-tooltip").fadeOut(200,function(){b(this).remove()})}},"#pp-nav li")}})(jQuery);
Please check this link:-http://codepen.io/blossk/pen/aFbIo