Use jquery to write a hot key (J/K) Dynamic scrolling browser plug-in

It's boring to work overtime. You can write an egg in a few minutes to entertain yourself...

The implementation effect is very simple. The j/k key is used to automatically roll the previous or next dynamic information. Like twitter, Weibo, and g +, it is a tool for lazy IB.

The main solution is to determine the number of items currently displayed on the dynamic list, so as to obtain the index position in the dynamic list, so as to obtain the corresponding scrollTop value before or after. Therefore, we need to traverse each element in the current dynamic list, compare it with the current window scrollTop value, and calculate the index that is just not greater than this value as a reference object. Www.2cto.com

The basic code is as follows:

01
Var eventNS = 'keydown. timelineHotkeys ';
02
$ (Document). unbind (eventNS). bind (eventNS, function (e ){
03
// Wrapobj is the package object outside the dynamic list
04
Var wrapobj = $ ('. timeline-feeds: visible'). eq (0 );
05
If (wrapobj. length> 0 ){
06
Var code = e. keyCode;
07
// FeedItemList is a dynamic list object.
08
Var feedItemList = wrapobj. find ('. item ');
09
If (code = 74 | code = 75 ){
10
Var scrollTop = $ (window). scrollTop ();
11
// The 60 pixels here are the distance between the top of the page and the first dynamic line.
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) {// processing (down) when j is pressed)
24
CurViewIndex + = 2;
25
CurOfst = feedItemList. eq (curViewIndex). offset (). top-feed2TopPx;
26
} Else {// processing (up) when the k key is pressed)
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
});