jqueryを使用してスクロールしてリスト内の項目をジャンプしないようにするには？

Question

jqueryを使用してスクロールしてリスト内の項目をジャンプする方法を教えてください。マウスを使用してリスト内のリスト項目にカーソルを置くと、問題はありません。しかし、上/下矢印キーを使ってリストをスクロールすると、いくつかの項目がジャンプするか、ジャンプしたように見えます。

たとえば、選択したアイテムがアイテム6の場合、上矢印キーを使用すると、次のシーケンスアイテム（アイテム5）にジャンプできます。

項目1 項2 項3 項4 項5 項6

$(document).ready(function(){ 
    $('li').hover(function(){ 
     j = $(this).parents("ul").find("li").index($(this)); 
     $('.hoverColor').removeClass('hoverColor'); 
     $(this).addClass('hoverColor'); 
    }); 
    j = -1; 
    $(document).keyup(function(e) { 
     if(e.keyCode == 38) // The Up arrow key 
     { 
      if(--j>0) { 
       j = 0; 
      } 
      $("li").removeClass('hoverColor'); 
      $("li:eq(" + j + ")","ul").addClass('hoverColor'); 
     } else if (e.keyCode == 40) { 
      if(++j >$("li", "ul").length-1){ 
       j = $("li", "ul").length-1; 
      } 
      $("li","ul").removeClass('hoverColor'); 
      $("li:eq(" + j + ")","ul").addClass('hoverColor'); 

     } 
    }); 
}); 

ここHTMLコードだ

テストフォーカス

$ {document} .ready（function {）} { $（ 'li'）} {0} {j = $（this）} find（ "li"） .index（$（this））; $（ '。hoverColor'）。removeClass（ 'hoverColor'）; $（this）.addClass（ 'hoverColor'）; }）; j = -1; { if（ - j $（ "li"、 "ul"）。lengthキーを押すと、$（ "li"、 "ul"）removeClass（ 'hoverColor'）; $（ "li：eq"） （ "+ j +"） "、" ul "）。text（）この関数は、 ; // $（ "li：eq（" + j + "）"、 "ul"）scrollTop（str2.top）; // $（ "＃textArea"）insertAtCaret（str）; } }） }）;

。hoverColor { 背景色：＃408080; 色：白; } l { list-style-type：none; list-style-position：inside; text-align：left; margin-left：8px; パディング：0px } div { オーバーフロー：スクロール; 幅：200ピクセル; 身長：300px; }

試験1

試験2

試験3

試験4

試験5

試験6

試験7

試験8

テスト9

試験1

試験2

試験3

試験4

試験5

試験6

試験7

試験8

テスト9

Answer 1

$(document).ready(function(){ 
    $('li').hover(function(){ 
     j = $(this).parents("ul").find("li").index($(this)); 
     $('.hoverColor').removeClass('hoverColor'); 
     $(this).addClass('hoverColor'); 
    }); 
    j = -1; 
    $(document).keyup(function(e) { 
     if(e.keyCode == 38) // The Up arrow key 
     { 
      // if(--j>0) { 
      //  j = 0; 
      // } 
      $("li").removeClass('hoverColor'); 
      $("li:eq(" + j + ")","ul").addClass('hoverColor'); 
     } else if (e.keyCode == 40) { 
      if(++j >$("li", "ul").length-1){ 
       j = $("li", "ul").length-1; 
      } 
      $("li","ul").removeClass('hoverColor'); 
      $("li:eq(" + j + ")","ul").addClass('hoverColor'); 

     } 
    }); 
});