使用jquery写一个热键(J/K)动态滚动浏览插件

加班之余很无聊，几分钟足够写个彩蛋夹在里面自娱自乐。。。

实现的效果很简单，用j/k键自动翻滚上一条/下一条动态信息，和twitter、微博、g+等等一样，乃懒人IB利器。

主要解决的问题就是判断当前显示在第几条之上，如此获得动态列表中一条的索引位置，从而得到之前或之后对应的scrollTop值。为此需要遍历当前动态列表的每个元素，对其和当前的窗口scrollTop值作对比，把刚好不大于该值的那条索引作为参考物来进行之后的计算。www.zzzyk.com

基本的代码如下:

01
var eventNS='keydown.timelineHotkeys';
02
$(document).unbind(eventNS).bind(eventNS,function(e){
03
    //wrapobj为动态列表外的包裹对象
04
    var wrapobj=$('.timeline-feeds:visible').eq(0);
05
    if(wrapobj.length>0){
06
        var code = e.keyCode;
07
        //feedItemList为每个动态列表对象
08
        var feedItemList=wrapobj.find('.item');
09
        if(code===74||code===75){
10
            var scrollTop=$(window).scrollTop();
11
            //这里的60像素是页面顶部到第一条动态之间的间隔距离
12
            var feed2TopPx=60;
13
            scrollTop+=feed2TopPx;
14
            var curViewIndex=-1;
15
            var curOfst=0;
16
            feedItemList.each(function(i){
17
                var ofst=$(this).offset().top;
18
                if(ofst<scrollTop){
19
                    curViewIndex=i;
20
                    curOfst=ofst;
21
                }
22
            });
23
            if(code === 74) { // 按下j键时的处理（down）
24
                curViewIndex+=2;
25
                curOfst=feedItemList.eq(curViewIndex).offset().top-feed2TopPx;
26
            }else{ // 按下k键时的处理 (up)
27
                if(curViewIndex!=-1){
28
                    curViewIndex=curViewIndex>0?curViewIndex:0;
29
                    curOfst=feedItemList.eq(curViewIndex).offset().top-feed2TopPx;
30
                }
31
            }
32
            $('body,html').animate({ scrollTop: curOfst}, 100);
33
        }
34
    }else{
35
        $(this).unbind(eventNS);
36
    }
37
});

补充：web前端 , JavaScript ,