Show image when you can scroll in my div

Hello,

I have a div that is filled with dynamic content. So the size is not the same all the time. Sometimes it has a scollbar and sometime it doesnt. When is has a scrollbar I want to let the user know by adding a small image at the bottom (a small bouncing arrow).

Somehow I cant get that working properly…

This is what I got now…

My javascript:

<script type="text/javascript">
$(window).load(function(){alert($('#scroller').height());})


if ( $('#scroller').height() < 1051) {

}
else {
   document.write('<div class="scroll"><p><img src="http://www.website.nl/showroom/pijl.gif" alt=""/></p></div>');
}

</script>

And this is my css:

#scroller
{
    height:auto;
}

When I use the alert function it is showing me diffrent heights but the if function does not work…

Can somebody help me out:)

Thank in advance

This is not question for PHP, but rather for JavaScript. However, I don’t know why wouldn’t this work. Can you set up a working example on e.g. http://jsfiddle.net/?

And also, I wouldn’t recommend using document.write(). Instead, place that HTML in the code and hide it (CSS display: none;) and then show it with jQuery in if function ($(‘.scroll’).show();)