Ajax Loader
×

scrollPoints

  • define an array of points that are x pixels from top
  • scroll between those points using keyboard arrows
  • supports chrome/ff/opera/ie8+
HTML
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
1
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
2
  
3
<div>0</div>
4
<div>500</div>
5
<div>1000</div>
6
<div>1500</div>
7
<div>2000</div>
8
<div>2500</div>
9
<div>3000</div>
10
<div>3500</div>
11
<div>4000</div>
12
<div>4500</div>
13
<div>5000</div>
14
<div>5500</div>
15
<div>6000</div>
16
<div>6500</div>
17
<div>7000</div>
18
<div>7500</div>
19
<div>8000</div>
20
<div>8500</div>
21
<div>9000</div>
22
<div>9500</div>
23
<div>10000</div>
24
<div>10500</div>
 
CSS
/* reset */
1
/* reset */
2
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}
3
 
4
/* some basic styling */
5
div {
6
  font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; 
7
   font-weight: 300;
8
  font-size: 48px;
9
  width: 100%;
10
  height: 500px;
11
  margin: 0 auto;
12
  background: #A7DBD8;
13
  color: #fff;
14
  font-weight: bold;
15
  text-align: center;
16
  border-radius: 5px;
17
}
18
div:nth-child(2n+1) {
19
  background: #E0E4CC;
20
}
 
JavaScript
$(function(){
1
$(function(){
2
 
3
//array of points that are x pixels from top
4
var scrollPoints = ['0', '850', '2100', '2950', '4400', '5280', '7000', '7850', '8600', '9450', '10290'];
5
 
6
  
7
//$.browser is going to be removed with jQuery 1.9
8
//i should rewrite this
9
  
10
 
11
if ($.browser.webkit === true) {
12
  var one = two = 'body';
13
} else if ($.browser.opera === true) {
14
  var one = this,
15
      two = 'html';
16
} else {
17
  var one = document,
18
      two = 'html';
19
      };  
20
  
21
  
22
//preventing arrow keys default behavior
23
$(document).keydown(function(e){
24
  var code = e.keyCode ? e.keyCode : e.which;
25
  if(code === 40 || code === 38 ){
26
    e.preventDefault();
27
    e.stopPropagation();
28
    return false;
29
  }
30
});
31
  
32
  
33
//main
34
$(one).on('keyup', function(event) {
35
    var curScroll = $(two).scrollTop(),
36
        keys = scrollPoints.length,
37
        moved = false,
38
        keypressed = event.keyCode;
39
    for (i = 0; i < keys; i++) {
40
        if (moved === false) {
41
            if (keypressed === 40 && i !== (keys - 1) && parseInt(scrollPoints[i]) <= curScroll && parseInt(scrollPoints[i + 1]) > curScroll) {
42
                $(two).animate({
43
                    scrollTop : (parseInt(scrollPoints[i + 1]))
44
                }, 'slow');
45
                //console.log('down');
46
                moved = true;
47
            } else if (keypressed === 38 && i !== 0 && parseInt(scrollPoints[i]) >= curScroll && parseInt(scrollPoints[i - 1]) < curScroll) {
48
                $(two).animate({
49
                    scrollTop : (parseInt(scrollPoints[i - 1]))
50
                }, 'slow');
51
                //console.log('up');
52
                moved = true;
53
            }
54
        }
55
    }
56
});
57
});
 

scrollPoints

CSSDeck G+