Skip to content

pure javascript scrollit #43

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

pure javascript scrollit #43

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
94 changes: 94 additions & 0 deletions demo/index-javascript.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,94 @@
<!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>

<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'>

</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&#8226;it&#8226;dot&#8226;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>
<script src='../scrollIt.javascript.js' type='text/javascript'></script>
</body>
</html>
147 changes: 147 additions & 0 deletions scrollIt.javascript.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,147 @@
if (!NodeList.prototype.forEach) {
var forEach = function (array, callback, scope) {
for (var i = 0; i < array.length; i++) {
callback.call(scope, i, array[i]); // passes back stuff we need
}
};
}

(function(){
'use strict';
// forEach method
var scroll = function(options){
var self = {};
self.options = options;
var animation = null;
var active = 0,
NodeListEl = document.querySelectorAll('[data-scroll-index]'),
lastIndex = NodeListEl[NodeListEl.length-1].dataset.scrollIndex;

var navigate = function(ndx){
if(ndx < 0 || ndx > lastIndex) return;
var targetTop = document.querySelector('[data-scroll-index="'+ ndx + '"]').offsetTop + self.options.topOffset,
distance = targetTop - window.scrollY,
//Define speed to ensure scroll consistancy whether it's scrolling betweem two far away position or two very close position
scrollSpeed = self.options.speed;
//requestAnimationFrame(scrollit);
scrollit();


function scrollit(){
distance = targetTop - window.scrollY;
if (distance > 0){
window.scrollBy(0, scrollSpeed);
if(distance < scrollSpeed ) {
distance = 0;
window.scrollTo(0, targetTop);
return;
}
requestAnimationFrame(scrollit);
}
if (distance < 0){
window.scrollBy(0, -scrollSpeed);
if(distance > - scrollSpeed) {
distance = 0;
window.scrollTo(0, targetTop);
return;
}
requestAnimationFrame(scrollit);
}
if (distance == 0){
return;
}

};
};
self.doScroll = function(e){

var target = e.target.dataset.scrollNav;
navigate(target);

};

function watchActive(){
var winTop = window.pageYOffset;
//padding at top of the highest element
const padding = 16;

function isVisible(node){
return (winTop + padding) >= node.offsetTop + self.options.topOffset &&
(winTop + padding) < node.offsetTop + (self.options.topOffset) + node.offsetHeight;

}

var nodeList = [].slice.call(document.querySelectorAll("[data-scroll-index]")).filter(isVisible);
if(nodeList.length > 0){
var newActive = nodeList[0].dataset.scrollIndex;
updateActive(newActive);

}
};

function updateActive(ndx){
active = ndx;
var navItem = document.querySelectorAll('[data-scroll-nav]');
forEach(navItem, function(key, value){
value.classList.remove(self.options.activeClass);
})
document.querySelector('[data-scroll-nav= "'+ ndx +'"]').classList.add(self.options.activeClass);


};
/**
* keyNavigation
*
* sets up keyboard navigation behavior
*/

//problem
var keyNavigation = function (e) {
var key = e.which;
if(key == self.options.upKey && active > 0) {
navigate(parseInt(active) - 1);
return false;
} else if(key == self.options.downKey && active < lastIndex) {
console.log(lastIndex);
navigate(parseInt(active) + 1);
return false;
}
return true;
};

window.onscroll = function(){
watchActive();
};

window.onkeydown = function(e){
keyNavigation(e);

};

return self;
}
window.scroll = scroll;

})();

var s = scroll({
upKey: 38,
downKey: 40,
scrollTime: 500,
activeClass: 'bg-aqua',
topOffset : 0,
speed: 10,
});


var tar = document.querySelectorAll('[data-scroll-nav]');
forEach(tar, function(key, value){
value.addEventListener("click", function(e){
e.preventDefault();
s.doScroll(e);

})

});