A reappearing DIV with scroll problems in the document

Small question on JavaScript.  It works so far, but has one problem: the page scroll is reset to 0,0 no matter what I do!
Basically, I have a DIV that I want to appear whever a summoning link is clicked, the DIV is the same one at all times and should
appear next to the clicked-upon link and the screen should not move.  Plus I did not want to include a huge JavaScript library to accomplish this.

So, what am I doing wrong?  How do I get this DIV to appear next to the links and have the page stay where it is (not return to 0,0)?

The JavaScript
<script type="text/javascript">
function relocateSocial(event)
{  
      var obj = document.getElementById('social');
      var newTop = (event.clientY+getScrollY());
      obj.style.top = newTop+"px";
      obj.style.left = (event.clientX)+"px";
      obj.style.display = "block";
      
      self.scroll(0, newTop);
      //alert("newTop:"+newTop);
      
}
function hideSocial(event)
{
      var obj = document.getElementById('social');
      //obj.style.top = 200+"px";
      //obj.style.left = 2000+"px";
      obj.style.display = "none";
}

function getScrollY() {
      var sy = 0;
      if (document.documentElement && document.documentElement.scrollTop)
            sy = document.documentElement.scrollTop;
      else if (document.body && document.body.scrollTop)
            sy = document.body.scrollTop;
      else if (window.pageYOffset)
            sy = window.pageYOffset;
      else if (window.scrollY)
            sy = window.scrollY;
      return sy;
}
</script>
....
..
// a summoner link
<a href="#" onclick="relocateSocial(event)">
 Summon the Social Bookmark list JFunction.
</a>

...
..
.
// the DIV
<div id="social" style=" width= 200px; position: absolute; top: 200px; left: 2000px; padding: 5px; border:5px ridge green; display: none; background-color:white; color:black; text-align:left">
// some image links here
</div>Start Free Trial