I have a footer element on the bottom of my page that can be removed/brought back by clicking on two arrows. A problem arises when I re-size the browser window, the footer does not always stick to the bottom of the page and can end up off page, inaccessible, or in the middle of the page. I have put together a fiddle here, but the javascript doesn't seem to work in it...

<http://jsfiddle.net/Za7Lq/>

JS:

```
$(document).ready(function(){
  $("#darrow").click(function(){
    $("#footer").animate({"top": "+=100px"}, "slow");
    $("#uarrow").animate({"top": "-=50px"}, "slow");
    $("#darrow").animate({"top": "+=100px"}, "slow");
  });
});

$(document).ready(function(){
  $("#uarrow").click(function(){
    $("#footer").animate({"top": "-=100px"}, "slow");
    $("#uarrow").animate({"top": "+=50px"}, "slow");
    $("#darrow").animate({"top": "-=100px"}, "slow");
  });
});

```