improved path to scrollIt.js
This commit is contained in:
Open-Steps.org
parent
4485cd1978
commit
9e3b363653
14 changed files with 1 additions and 616 deletions
|
|
@ -21,7 +21,7 @@
|
|||
<script src="{{ '/bower_components/vegas/dist/jquery.vegas.min.js' | prepend: site.baseurl }}" type="text/javascript"></script>
|
||||
<script src="{{ '/bower_components/picbookjs/js/picbook.min.js' | prepend: site.baseurl }}" type="text/javascript"></script>
|
||||
<script src="{{ '/js/jquery.imagefill.min.js' | prepend: site.baseurl }}" type="text/javascript" ></script>
|
||||
<script src="{{ '/js/scrollit.js-master/scrollit.min.js' | prepend: site.baseurl }}" type="text/javascript" ></script>
|
||||
<script src="{{ '/js/scrollit.min.js' | prepend: site.baseurl }}" type="text/javascript" ></script>
|
||||
<script src="{{ '/js/custom.js' | prepend: site.baseurl }}" type="text/javascript" ></script>
|
||||
|
||||
</head>
|
||||
|
|
|
|||
3
js/scrollIt.js-master/.gitignore
vendored
3
js/scrollIt.js-master/.gitignore
vendored
|
|
@ -1,3 +0,0 @@
|
|||
*.swp
|
||||
*.sassc
|
||||
.DS_Store
|
||||
|
|
@ -1,5 +0,0 @@
|
|||
Authors ordered by first contribution
|
||||
|
||||
Chris Polis <cmpolis@gmail.com>
|
||||
Adam Merrifield <macagp@gmail.com>
|
||||
Frank S
|
||||
|
|
@ -1,22 +0,0 @@
|
|||
The MIT License (MIT)
|
||||
|
||||
Copyright (c) 2013 Chris Polis
|
||||
https://github.com/cmpolis/scrollIt.js/blob/master/AUTHORS.txt
|
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||
of this software and associated documentation files (the "Software"), to deal
|
||||
in the Software without restriction, including without limitation the rights
|
||||
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||
copies of the Software, and to permit persons to whom the Software is
|
||||
furnished to do so, subject to the following conditions:
|
||||
|
||||
The above copyright notice and this permission notice shall be included in
|
||||
all copies or substantial portions of the Software.
|
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
|
||||
THE SOFTWARE.
|
||||
|
|
@ -1,67 +0,0 @@
|
|||
### [Demo and more information](http://bytemuse.com/scrollIt.js)
|
||||
|
||||
## About
|
||||
ScrollIt.js(scroll•it•dot•js) makes it easy to make long, vertically scrolling pages. This is why it rocks:
|
||||
|
||||
- **Easy to implement:** One JS call, just put data- attributes on the DOM
|
||||
- **Lightweight:** ~1kb minified
|
||||
- **Active Class:** Your navigation is updated automatically
|
||||
- **Configurable:** Set the animation easing, duration, callbacks and more
|
||||
- **Keyboard Navigation:** Press the up and down keys to move...
|
||||
|
||||
## Usage
|
||||
|
||||
1. Include jQuery and scrollIt.js
|
||||
```html
|
||||
<script src="jquery-1.10.2.min.js" type="text/javascript"></script>
|
||||
<script src="scrollIt.js" type="text/javascript"></script>
|
||||
```
|
||||
|
||||
2. Put a data-scroll-index attribute on each section
|
||||
```html
|
||||
<div data-scroll-index="0">..content..</div>
|
||||
<div data-scroll-index="1">...</div>
|
||||
<div data-scroll-index="2">...</div>
|
||||
```
|
||||
|
||||
3. Put corresponding data-scroll-nav attributes on each nav
|
||||
```html
|
||||
<a data-scroll-nav="0">About</a>
|
||||
<a data-scroll-nav="1">Usage</a>
|
||||
<a data-scroll-nav="2">Options</a>
|
||||
```
|
||||
|
||||
4. For links to sections, put on a data-scroll-goto attribute
|
||||
```html
|
||||
<a data-scroll-goto="0">Back to top</a>
|
||||
```
|
||||
|
||||
5. Call scrollIt()
|
||||
```JavaScript
|
||||
$(function(){
|
||||
$.scrollIt();
|
||||
});
|
||||
```
|
||||
|
||||
## Options
|
||||
|
||||
To customize scrollIt.js, simply pass in an options object: (defaults shown)
|
||||
|
||||
```JavaScript
|
||||
$.scrollIt({
|
||||
upKey: 38, // key code to navigate to the next section
|
||||
downKey: 40, // key code to navigate to the previous section
|
||||
easing: 'linear', // the easing function for animation
|
||||
scrollTime: 600, // how long (in ms) the animation takes
|
||||
activeClass: 'active', // class given to the active nav element
|
||||
onPageChange: null, // function(pageIndex) that is called when page is changed
|
||||
topOffset: 0 // offste (in px) for fixed top navigation
|
||||
});
|
||||
```
|
||||
|
||||
## Credit
|
||||
Created by [@ChrisPolis](http://twitter.com/chrispolis), *[blog](http://bytemuse.com)*
|
||||
|
||||
Feel free to use, share and fork.
|
||||
|
||||
Enjoy!
|
||||
|
|
@ -1,42 +0,0 @@
|
|||
{
|
||||
"name": "ScrollIt",
|
||||
"title": "ScrollIt",
|
||||
"description": "ScrollIt.js(scroll•it•dot•js) makes it easy to make long, vertically scrolling pages.",
|
||||
"keywords": [
|
||||
"page",
|
||||
"scroll",
|
||||
"navigation",
|
||||
"keydown",
|
||||
"keyboard"
|
||||
],
|
||||
"version": "1.0.3",
|
||||
"author": {
|
||||
"name": "Chris Polis, Adam Merrifield and Frank S",
|
||||
"url": "https://github.com/cmpolis/scrollIt.js/blob/master/AUTHORS.txt"
|
||||
},
|
||||
"maintainers": [
|
||||
{
|
||||
"name": "Chris Polis",
|
||||
"email": "cmpolis@gmail.com",
|
||||
"url": "http://ByteMuse.com"
|
||||
},
|
||||
{
|
||||
"name": "Adam Merrifield",
|
||||
"email": "macagp@gmail.com",
|
||||
"url": "http://adam.merrifield.ca"
|
||||
}
|
||||
],
|
||||
"licenses": [
|
||||
{
|
||||
"type": "MIT",
|
||||
"url": "https://github.com/cmpolis/scrollIt.js/blob/master/LICENSE.txt"
|
||||
}
|
||||
],
|
||||
"bugs": "https://github.com/cmpolis/scrollIt.js/issues",
|
||||
"homepage": "https://github.com/cmpolis/scrollIt.js",
|
||||
"docs": "https://github.com/cmpolis/scrollIt.js",
|
||||
"download": "https://github.com/cmpolis/scrollIt.js/archive/master.zip",
|
||||
"dependencies": {
|
||||
"jquery": ">=1.8"
|
||||
}
|
||||
}
|
||||
|
|
@ -1,8 +0,0 @@
|
|||
{
|
||||
"name": "ScrollIt",
|
||||
"version": "1.0.0",
|
||||
"main": "./scrollIt.js",
|
||||
"dependencies": {
|
||||
"jquery": "~1.10.2"
|
||||
}
|
||||
}
|
||||
|
|
@ -1,71 +0,0 @@
|
|||
!!!
|
||||
%html(xmlns='http://www.w3.org/1999/xhtml' lang='en' xml:lang='en')
|
||||
%head
|
||||
%title ScrollIt.js - easy vertical scrolling
|
||||
%script(type='text/javascript' src='jquery-1.10.2.min.js')
|
||||
%script(type='text/javascript' src='../scrollIt.min.js')
|
||||
%link(href='http://fonts.googleapis.com/css?family=Headland+One|Open+Sans:400italic,400,700' rel='stylesheet' type='text/css')
|
||||
%link(rel='stylesheet' href='style.css')
|
||||
%script $(function() { $.scrollIt(); });
|
||||
%body
|
||||
.nav-container
|
||||
%nav
|
||||
%ul
|
||||
%li
|
||||
%a.active(data-scroll-nav='0') About
|
||||
%li
|
||||
%a(data-scroll-nav='1') Usage
|
||||
%li
|
||||
%a(data-scroll-nav='2') Options
|
||||
%li
|
||||
%a(data-scroll-nav='3') Credit
|
||||
|
||||
%section(data-scroll-index='0')
|
||||
.content
|
||||
%h1 ScrollIt.js
|
||||
<a href="https://twitter.com/share" class="twitter-share-button" data-text="ScrollIt.js - easy vertical scrolling" data-via="ChrisPolis">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=cmpolis&repo=scrollIt.js&type=watch&count=true" allowtransparency="true" frameborder="0" scrolling="0" width="110" height="20"></iframe>
|
||||
%h2 About
|
||||
%p ScrollIt.js<i>(scroll•it•dot•js)</i> makes it easy to make scrolling pages like this one or add scrolling functionality to existing pages. <a href='http://bytemuse.com/post/easy-scrolling-pages-with-scrollit-dot-js/'>Here's a brief blog plost explaining it.</a>
|
||||
%h4 This is why it rocks:
|
||||
%ul.why-list
|
||||
%li <b>Easy to implement:</b> One JS call, just put data- attributes on the DOM
|
||||
%li <b>Lightweight:</b> ~1kb minified
|
||||
%li <b>Active Class:</b> Your navigation is updated automatically
|
||||
%li <b>Configurable:</b> Set the animation easing, duration, callbacks and more
|
||||
%li <b>Keyboard Navigation:</b> Press the up and down keys to move...
|
||||
%section(data-scroll-index='1')
|
||||
.content
|
||||
%h2 Usage
|
||||
%p
|
||||
1) Include jQuery and scrollIt.js
|
||||
<script src="https://gist.github.com/cmpolis/5954658.js"></script>
|
||||
%p
|
||||
2) Put a <i>data-scroll-index</i> attribute on each section
|
||||
<script src="https://gist.github.com/cmpolis/5954675.js"></script>
|
||||
%p
|
||||
3) Put corresponding <i>data-scroll-nav</i> attributes on each nav element
|
||||
<script src="https://gist.github.com/cmpolis/5954686.js"></script>
|
||||
%p
|
||||
4) For links to sections, put on a <i>data-scroll-goto</i> attribute
|
||||
<script src="https://gist.github.com/cmpolis/5954690.js"></script>
|
||||
|
||||
%p
|
||||
5) Call <i>scrollIt()</i>
|
||||
<script src="https://gist.github.com/cmpolis/5954703.js"></script>
|
||||
%p <i>View the source of this page for an example</i>
|
||||
%section(data-scroll-index='2')
|
||||
.content
|
||||
%h2 Options
|
||||
%p To customize scrollIt.js, simply pass in an options object: <i>(defaults shown)</i>
|
||||
<script src="https://gist.github.com/cmpolis/5954639.js"></script>
|
||||
%section(data-scroll-index='3')
|
||||
.content
|
||||
%h2 Credit
|
||||
%p ScrollIt.js was created by <a href='http://twitter.com/chrispolis'>@ChrisPolis</a>.
|
||||
%p Feel free to use, share and fork it. <a href='https://github.com/cmpolis/scrollIt.js'>It's on Github.</a>
|
||||
|
||||
%p Enjoy!
|
||||
%p.bottom-link
|
||||
%a(data-scroll-goto='0') Back to top
|
||||
|
|
@ -1,93 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang='en' xml:lang='en' xmlns='http://www.w3.org/1999/xhtml'>
|
||||
<head>
|
||||
<title>ScrollIt.js by @ChrisPolis</title>
|
||||
<script src='jquery-1.10.2.min.js' type='text/javascript'></script>
|
||||
<script src='../scrollIt.min.js' type='text/javascript'></script>
|
||||
<link href='http://fonts.googleapis.com/css?family=Headland+One|Open+Sans:400italic,400,700' rel='stylesheet' type='text/css'>
|
||||
<link href='style.css' rel='stylesheet'>
|
||||
<script>$(function() { $.scrollIt(); });</script>
|
||||
</head>
|
||||
<body>
|
||||
<div class='nav-container'>
|
||||
<nav>
|
||||
<ul>
|
||||
<li>
|
||||
<a class='active' data-scroll-nav='0'>About</a>
|
||||
</li>
|
||||
<li>
|
||||
<a data-scroll-nav='1'>Usage</a>
|
||||
</li>
|
||||
<li>
|
||||
<a data-scroll-nav='2'>Options</a>
|
||||
</li>
|
||||
<li>
|
||||
<a data-scroll-nav='3'>Credit</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
<section data-scroll-index='0'>
|
||||
<div class='content'>
|
||||
<h1>ScrollIt.js</h1>
|
||||
<a href="https://twitter.com/share" class="twitter-share-button" data-text="Check out this jQuery plugin - ScrollIt.js" data-via="ChrisPolis">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=cmpolis&repo=scrollIt.js&type=watch&count=true" allowtransparency="true" frameborder="0" scrolling="0" width="110" height="20"></iframe>
|
||||
<h2>About</h2>
|
||||
<p>ScrollIt.js<i>(scroll•it•dot•js)</i> makes it easy to make scrolling pages like this one or add scrolling functionality to existing pages. <a href='http://bytemuse.com/post/easy-scrolling-pages-with-scrollit-dot-js/'>Here's a brief blog plost explaining it.</a></p>
|
||||
<h4>This is why it rocks:</h4>
|
||||
<ul class='why-list'>
|
||||
<li><b>Easy to implement:</b> One JS call, just put data- attributes on the DOM</li>
|
||||
<li><b>Lightweight:</b> ~1kb minified</li>
|
||||
<li><b>Active Class:</b> Your navigation is updated automatically</li>
|
||||
<li><b>Configurable:</b> Set the animation easing, duration, callbacks and more</li>
|
||||
<li><b>Keyboard Navigation:</b> Press the up and down keys to move...</li>
|
||||
</ul>
|
||||
</div>
|
||||
</section>
|
||||
<section data-scroll-index='1'>
|
||||
<div class='content'>
|
||||
<h2>Usage</h2>
|
||||
<p>
|
||||
1) Include jQuery and scrollIt.js
|
||||
<script src="https://gist.github.com/cmpolis/5954658.js"></script>
|
||||
</p>
|
||||
<p>
|
||||
2) Put a <i>data-scroll-index</i> attribute on each section
|
||||
<script src="https://gist.github.com/cmpolis/5954675.js"></script>
|
||||
</p>
|
||||
<p>
|
||||
3) Put corresponding <i>data-scroll-nav</i> attributes on each nav element
|
||||
<script src="https://gist.github.com/cmpolis/5954686.js"></script>
|
||||
</p>
|
||||
<p>
|
||||
4) For links to sections, put on a <i>data-scroll-goto</i> attribute
|
||||
<script src="https://gist.github.com/cmpolis/5954690.js"></script>
|
||||
</p>
|
||||
<p>
|
||||
5) Call <i>scrollIt()</i>
|
||||
<script src="https://gist.github.com/cmpolis/5954703.js"></script>
|
||||
</p>
|
||||
<p><i>View the source of this page for an example</i></p>
|
||||
</div>
|
||||
</section>
|
||||
<section data-scroll-index='2'>
|
||||
<div class='content'>
|
||||
<h2>Options</h2>
|
||||
<p>To customize scrollIt.js, simply pass in an options object: <i>(defaults shown)</i></p>
|
||||
<script src="https://gist.github.com/cmpolis/5954639.js"></script>
|
||||
</div>
|
||||
</section>
|
||||
<section data-scroll-index='3'>
|
||||
<div class='content'>
|
||||
<h2>Credit</h2>
|
||||
<p>ScrollIt.js was created by <a href='http://twitter.com/chrispolis'>@ChrisPolis</a>.</p>
|
||||
<p>Feel free to use, share and fork it. <a href='https://github.com/cmpolis/scrollIt.js'>It's on Github.</a></p>
|
||||
<p>Enjoy!</p>
|
||||
<p class='bottom-link'>
|
||||
<a data-scroll-goto='0'>Back to top</a>
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
</body>
|
||||
</html>
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -1,87 +0,0 @@
|
|||
body {
|
||||
padding: 0px;
|
||||
margin: 0px;
|
||||
font-family: "Open Sans", sans-serif; }
|
||||
|
||||
h1, h2, h4, nav li a {
|
||||
font-family: "Headland One", Georgia, serif; }
|
||||
|
||||
h1 {
|
||||
font-size: 48px;
|
||||
margin-top: 80px;
|
||||
margin-bottom: 10px;
|
||||
color: #002e40; }
|
||||
|
||||
h2 {
|
||||
margin-top: 80px;
|
||||
font-size: 28px; }
|
||||
|
||||
h4 {
|
||||
font-size: 20px;
|
||||
margin-bottom: 10px; }
|
||||
|
||||
.why-list {
|
||||
margin-top: 0px; }
|
||||
.why-list li {
|
||||
line-height: 28px; }
|
||||
|
||||
a {
|
||||
cursor: pointer; }
|
||||
|
||||
ul {
|
||||
list-style: none; }
|
||||
|
||||
.nav-container {
|
||||
background-color: #002e40;
|
||||
width: 100%;
|
||||
position: fixed;
|
||||
left: 0px; }
|
||||
|
||||
nav {
|
||||
text-align: center;
|
||||
width: 640px;
|
||||
margin: 0px auto; }
|
||||
nav ul {
|
||||
padding: 0px; }
|
||||
nav li {
|
||||
width: 24%;
|
||||
display: inline-block; }
|
||||
nav li a {
|
||||
font-size: 15px;
|
||||
color: white; }
|
||||
nav li a.active {
|
||||
color: #aaaaaa; }
|
||||
@media screen and (max-width: 640px) {
|
||||
nav {
|
||||
width: 90%; }
|
||||
nav li a {
|
||||
font-size: 18px; } }
|
||||
|
||||
section {
|
||||
padding-top: 40px;
|
||||
height: 1200px;
|
||||
width: 100%; }
|
||||
section .content {
|
||||
margin: 0px auto;
|
||||
max-width: 640px; }
|
||||
@media screen and (max-width: 640px) {
|
||||
section .content {
|
||||
width: 90%; } }
|
||||
section .content a {
|
||||
color: #002e40; }
|
||||
|
||||
section:nth-child(odd) {
|
||||
background-color: #002e40;
|
||||
color: white; }
|
||||
section:nth-child(odd) a {
|
||||
color: white; }
|
||||
|
||||
.bottom-link {
|
||||
margin-top: 80px;
|
||||
font-style: italic; }
|
||||
|
||||
.gist-meta {
|
||||
display: none; }
|
||||
|
||||
.file-data {
|
||||
font-size: 14px; }
|
||||
|
|
@ -1,82 +0,0 @@
|
|||
$pageWidth: 640px
|
||||
$responsiveWidth: 90%
|
||||
$primary: #fff
|
||||
$secondary: #002E40
|
||||
|
||||
body
|
||||
padding: 0px
|
||||
margin: 0px
|
||||
font-family: 'Open Sans', sans-serif
|
||||
|
||||
h1, h2, h4, nav li a
|
||||
font-family: 'Headland One', Georgia, serif
|
||||
h1
|
||||
font-size: 48px
|
||||
margin-top: 80px
|
||||
margin-bottom: 10px
|
||||
color: $secondary
|
||||
h2
|
||||
margin-top: 80px
|
||||
font-size: 28px
|
||||
h4
|
||||
font-size: 20px
|
||||
margin-bottom: 10px
|
||||
.why-list
|
||||
margin-top: 0px
|
||||
li
|
||||
line-height: 28px
|
||||
a
|
||||
cursor: pointer
|
||||
ul
|
||||
list-style: none
|
||||
|
||||
.nav-container
|
||||
background-color: $secondary
|
||||
width: 100%
|
||||
position: fixed
|
||||
left: 0px
|
||||
nav
|
||||
text-align: center
|
||||
width: $pageWidth
|
||||
margin: 0px auto
|
||||
ul
|
||||
padding: 0px
|
||||
li
|
||||
width: 24%
|
||||
display: inline-block
|
||||
a
|
||||
font-size: 15px
|
||||
color: $primary
|
||||
a.active
|
||||
color: #aaa
|
||||
@media screen and (max-width: $pageWidth)
|
||||
width: $responsiveWidth
|
||||
li
|
||||
a
|
||||
font-size: 18px
|
||||
|
||||
section
|
||||
padding-top: 40px
|
||||
height: 1200px
|
||||
width: 100%
|
||||
.content
|
||||
margin: 0px auto
|
||||
max-width: $pageWidth
|
||||
@media screen and (max-width: $pageWidth)
|
||||
width: $responsiveWidth
|
||||
a
|
||||
color: $secondary
|
||||
section:nth-child(odd)
|
||||
background-color: $secondary
|
||||
color: $primary
|
||||
a
|
||||
color: $primary
|
||||
|
||||
.bottom-link
|
||||
margin-top: 80px
|
||||
font-style: italic
|
||||
|
||||
.gist-meta
|
||||
display: none
|
||||
.file-data
|
||||
font-size: 14px
|
||||
|
|
@ -1,129 +0,0 @@
|
|||
/**
|
||||
* ScrollIt
|
||||
* ScrollIt.js(scroll•it•dot•js) makes it easy to make long, vertically scrolling pages.
|
||||
*
|
||||
* Latest version: https://github.com/cmpolis/scrollIt.js
|
||||
*
|
||||
* License <https://github.com/cmpolis/scrollIt.js/blob/master/LICENSE.txt>
|
||||
*/
|
||||
(function($) {
|
||||
'use strict';
|
||||
|
||||
var pluginName = 'ScrollIt',
|
||||
pluginVersion = '1.0.3';
|
||||
|
||||
/*
|
||||
* OPTIONS
|
||||
*/
|
||||
var defaults = {
|
||||
upKey: 38,
|
||||
downKey: 40,
|
||||
easing: 'linear',
|
||||
scrollTime: 600,
|
||||
activeClass: 'active',
|
||||
onPageChange: null,
|
||||
topOffset : 0
|
||||
};
|
||||
|
||||
$.scrollIt = function(options) {
|
||||
|
||||
/*
|
||||
* DECLARATIONS
|
||||
*/
|
||||
var settings = $.extend(defaults, options),
|
||||
active = 0,
|
||||
lastIndex = $('[data-scroll-index]:last').attr('data-scroll-index');
|
||||
|
||||
/*
|
||||
* METHODS
|
||||
*/
|
||||
|
||||
/**
|
||||
* navigate
|
||||
*
|
||||
* sets up navigation animation
|
||||
*/
|
||||
var navigate = function(ndx) {
|
||||
if(ndx < 0 || ndx > lastIndex) return;
|
||||
|
||||
var targetTop = $('[data-scroll-index=' + ndx + ']').offset().top + settings.topOffset + 1;
|
||||
$('html,body').animate({
|
||||
scrollTop: targetTop,
|
||||
easing: settings.easing
|
||||
}, settings.scrollTime);
|
||||
};
|
||||
|
||||
/**
|
||||
* doScroll
|
||||
*
|
||||
* runs navigation() when criteria are met
|
||||
*/
|
||||
var doScroll = function (e) {
|
||||
var target = $(e.target).closest("[data-scroll-nav]").attr('data-scroll-nav') ||
|
||||
$(e.target).closest("[data-scroll-goto]").attr('data-scroll-goto');
|
||||
navigate(parseInt(target));
|
||||
};
|
||||
|
||||
/**
|
||||
* keyNavigation
|
||||
*
|
||||
* sets up keyboard navigation behavior
|
||||
*/
|
||||
var keyNavigation = function (e) {
|
||||
var key = e.which;
|
||||
if($('html,body').is(':animated') && (key == settings.upKey || key == settings.downKey)) {
|
||||
return false;
|
||||
}
|
||||
if(key == settings.upKey && active > 0) {
|
||||
navigate(parseInt(active) - 1);
|
||||
return false;
|
||||
} else if(key == settings.downKey && active < lastIndex) {
|
||||
navigate(parseInt(active) + 1);
|
||||
return false;
|
||||
}
|
||||
return true;
|
||||
};
|
||||
|
||||
/**
|
||||
* updateActive
|
||||
*
|
||||
* sets the currently active item
|
||||
*/
|
||||
var updateActive = function(ndx) {
|
||||
if(settings.onPageChange && ndx && (active != ndx)) settings.onPageChange(ndx);
|
||||
|
||||
active = ndx;
|
||||
$('[data-scroll-nav]').removeClass(settings.activeClass);
|
||||
$('[data-scroll-nav=' + ndx + ']').addClass(settings.activeClass);
|
||||
};
|
||||
|
||||
/**
|
||||
* watchActive
|
||||
*
|
||||
* watches currently active item and updates accordingly
|
||||
*/
|
||||
var watchActive = function() {
|
||||
var winTop = $(window).scrollTop();
|
||||
|
||||
var visible = $('[data-scroll-index]').filter(function(ndx, div) {
|
||||
return winTop >= $(div).offset().top + settings.topOffset &&
|
||||
winTop < $(div).offset().top + (settings.topOffset) + $(div).outerHeight()
|
||||
});
|
||||
var newActive = visible.first().attr('data-scroll-index');
|
||||
updateActive(newActive);
|
||||
};
|
||||
|
||||
/*
|
||||
* runs methods
|
||||
*/
|
||||
$(window).on('scroll',watchActive).scroll();
|
||||
|
||||
$(window).on('keydown', keyNavigation);
|
||||
|
||||
$('body').on('click','[data-scroll-nav], [data-scroll-goto]', function(e){
|
||||
e.preventDefault();
|
||||
doScroll(e);
|
||||
});
|
||||
|
||||
};
|
||||
}(jQuery));
|
||||
Loading…
Add table
Add a link
Reference in a new issue