Question

I am trying to create a vertical scroller using jquery and I am having troubles with my code..

function scrolldown() {     
    var newtop = $('.scroll-content').css('top') + '250';   
    $('.scroll-content').css({top: newtop});
}

The css:

.scroll-content {position:absolute; top:0px}

No problems with CSS I can change values in firebug and works fine, but the code is the issue. I want it to add 250px to current value but it doesnt work and when using .html(newtop) i can see that the output for the “top” value is 0px250… any ideas what I am doing wrong?

Answer 1

$('.scroll-content').css('top')

will return something like “123px”, which is a string (due to the “px”). If you add “250”, you have “123px250”, which is not what you want…

Try this one instead:

var newtop = $('.scroll-content').position().top + 250;
$('.scroll-content').css('top', newtop + 'px');