title: scroll to div with focus using up/down arrow keys
body: <p>I have this table structure with hundreds of rows wrapped in a overflow div with a fixed height
  user will be able to navigate <code>div</code> in <code>td tag</code> using the arrow keys either up/down/left/right.</p>
  
  <p>i'll want the overflown div to scroll alongside the overflown contents while users use up/down arrow keys to navigate the rest of the table rows</p>
  
  <p>here's my html</p>
  
  <pre><code>&lt;table id="product_table_body" class="js_livetable_products" border="0" cellpadding="0" cellspacing="0"&gt;
  &lt;tbody&gt;
          &lt;tr&gt;
              &lt;td&gt;&lt;div class="product_id cells"&gt;#&lt;/div&gt;&lt;/td&gt;
              &lt;td&gt;&lt;div class="product_name cells"&gt;product name&lt;/div&gt;&lt;/td&gt;
              &lt;td&gt;&lt;div class="product_prices product_cost_price cells"&gt;cost price&lt;/div&gt;&lt;/td&gt;
  
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td&gt;&lt;div class="product_id cells"&gt;#&lt;/div&gt;&lt;/td&gt;
              &lt;td&gt;&lt;div class="product_name cells"&gt;product name&lt;/div&gt;&lt;/td&gt;
              &lt;td&gt;&lt;div class="product_prices product_cost_price cells"&gt;cost price&lt;/div&gt;&lt;/td&gt;
  
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td&gt;&lt;div class="product_id cells"&gt;#&lt;/div&gt;&lt;/td&gt;
              &lt;td&gt;&lt;div class="product_name cells"&gt;product name&lt;/div&gt;&lt;/td&gt;
              &lt;td&gt;&lt;div class="product_prices product_cost_price cells"&gt;cost price&lt;/div&gt;&lt;/td&gt;
  
          &lt;/tr&gt;
  &lt;/tbody&gt;
  </code></pre>
  
  <p> </p>
  
  <p>here's a <a href="http://jsfiddle.net/XSeVd/2/" rel="nofollow">jsFiddle</a> to my question but arrow keys navigation seems not to work</p>