scrollPoints
- define an array of points that are x pixels from top
- scroll between those points using keyboard arrows
- supports chrome/ff/opera/ie8+
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<div>0</div>
<div>500</div>
<div>1000</div>
<div>1500</div>
<div>2000</div>
<div>2500</div>
<div>3000</div>
<div>3500</div>
<div>4000</div>
<div>4500</div>
<div>5000</div>
<div>5500</div>
<div>6000</div>
<div>6500</div>
<div>7000</div>
<div>7500</div>
<div>8000</div>
<div>8500</div>
<div>9000</div>
<div>9500</div>
<div>10000</div>
<div>10500</div>
/* reset */
/* reset */
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}table{border-collapse:collapse;border-spacing:0}
/* some basic styling */
div {
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
font-weight: 300;
font-size: 48px;
width: 100%;
height: 500px;
margin: 0 auto;
background: #A7DBD8;
color: #fff;
font-weight: bold;
text-align: center;
border-radius: 5px;
}
div:nth-child(2n+1) {
background: #E0E4CC;
}
$(function(){
$(function(){
//array of points that are x pixels from top
var scrollPoints = ['0', '850', '2100', '2950', '4400', '5280', '7000', '7850', '8600', '9450', '10290'];
//$.browser is going to be removed with jQuery 1.9
//i should rewrite this
if ($.browser.webkit === true) {
var one = two = 'body';
} else if ($.browser.opera === true) {
var one = this,
two = 'html';
} else {
var one = document,
two = 'html';
};
//preventing arrow keys default behavior
$(document).keydown(function(e){
var code = e.keyCode ? e.keyCode : e.which;
if(code === 40 || code === 38 ){
e.preventDefault();
e.stopPropagation();
return false;
}
});
//main
$(one).on('keyup', function(event) {
var curScroll = $(two).scrollTop(),
keys = scrollPoints.length,
moved = false,
keypressed = event.keyCode;
for (i = 0; i < keys; i++) {
if (moved === false) {
if (keypressed === 40 && i !== (keys - 1) && parseInt(scrollPoints[i]) <= curScroll && parseInt(scrollPoints[i + 1]) > curScroll) {
$(two).animate({
scrollTop : (parseInt(scrollPoints[i + 1]))
}, 'slow');
//console.log('down');
moved = true;
} else if (keypressed === 38 && i !== 0 && parseInt(scrollPoints[i]) >= curScroll && parseInt(scrollPoints[i - 1]) < curScroll) {
$(two).animate({
scrollTop : (parseInt(scrollPoints[i - 1]))
}, 'slow');
//console.log('up');
moved = true;
}
}
}
});
});