jquery - Hover to scroll down div and auto scroll to top when mouseleave -

hye. i'm working on jquery codes , codes work fine. understanding in jquery limited, can't tweak codes meet needs.

so, want scroll down ".punchmeintheface" div when hovering onto , @ same time want auto scroll div top when mouseleave.

<div class="punchmeintheface">    <img src="http://img29.imageshack.us/img29/2333/q4sl.jpg" alt="" /> </div> 

and jquery

var amount = ''; function scroll() {     $('.punchmeintheface').animate({         scrolltop: amount     }, 100, 'linear',function() {         if (amount != '') {             scroll();         }     }); } $('.punchmeintheface').hover(function() {     amount = '+=20';     scroll(); }, function() {     amount = ''; }); 

and css if needed

  .punchmeintheface {     width: 640px;     height: 100px;     overflow-y:auto;      overflow: hidden;   } 

this current work : http://jsfiddle.net/sandalkoyak/ghlct/

please take , me. thanks!

just edit part

$('.punchmeintheface').hover(function() {     amount = '+=20';     scroll(); }, function() {     amount = '0'; //<----- here }); 

http://jsfiddle.net/ghlct/1/