Show image when you can scroll in my div


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">

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

else {
   document.write('<div class="scroll"><p><img src="" alt=""/></p></div>');


And this is my css:


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.

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();)