Need help getting a better method to do this.

[Mark Topper]

Greetings.


I was thinking if it somehow was possible to replace this code with a better code.


My current code:

Code:

<!-- Count Scroll Start -->
        <div id="scroll">
            <a href="#" onclick="this.innerHTML='You have scrolled <span id=pixels>0</span> Pixels.';">
                <img src="images/blank.png" width="10" height="10" alt="" />
            </a>
</div>
    <!-- Count Scroll End -->

What it does:
Currently it change the image into a text.


What I don't like about it:
I don't like that it comes instantly on the page, it would be nice if it somehow could fade in.
But what is the most annoying is that it jumps to the top of the page when I click on it.


Demo:
http://www.marktopper.dk/goo/
NOTE: Up in the top-left corner I have a transpirant image (size 10x10 pixels) which you can click on to se this.


Does anyone have any ideas for a better method to do this?