Jquery, not changing css top value.

Question

So the problem im having is changing my #scroll top:value with the pixel (px) extension.

#container {
 height:100px;
 overflow:hidden;
}

#scroll {
 position:relative;
 top:0px;
}
<div id="container">

<p>
 <a id="up">Up</a>
</p>

<div id="scroll">up down blah</div>

</div>

$(function(){
  $("#up").hover(function(){
    var topVal = $( 0 + "px");
    $("#scroll").css("top", topVal-10 + "px");
  });

Answer 1

try this

 $("#up").hover(function(){
   $("#scroll").css("top", "-10px");
 });

this line doesnt make any sens:

var topVal = $( 0 + "px");

Answer 2

Pretty sure you don't add the px.

$("#scroll").css("top", topVal-10);

Should do it.

Also, if you are doing what I think you are trying to do (keep scrolling a div on hover) then this thread might be of interest to you, if not, disregard it. http://stackoverflow.com/questions/1897696/continous-mouseover