cambio JQUERY onClick 'top' atributo

Question

Estoy tratando de crear un scroll vertical utilizando jQuery y estoy teniendo problemas con mi código ..

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

El css:

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

No hay problemas con CSS Puedo cambiar los valores en Firebug y funciona bien, pero el problema es el código. Quiero que agregue 250px al valor actual pero no funciona y al usar .html(newtop) puedo ver que el resultado para el valor "superior" es 0px250 ... alguna idea de lo que estoy haciendo mal?

Answer 1

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

devolverá algo así como "123px", que es una cadena (debido a la "px"). Si añade "250", tiene "123px250", que no es lo que quiere ...

prueba este lugar:

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

Answer 2

Asegúrese de que está agregando un número entero superior a su valor no es una cadena. ver más abajo:

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

Answer 3

es necesario convertir la cadena css ('0px') en un int (0) para que pueda agregar 250, a continuación, añadir el 'px' de nuevo

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

Answer 4

Como alternativa a las respuestas publicadas, se puede utilizar un acceso directo a través de +=.animate() sin duración, así:

$(".scroll-content").animate({ top: "+=250px" }, 0);​ 

esto hará que el cambio de la adición de 250 píxeles de forma instantánea. Si realmente lo quería animado, simplemente cambie ese 0 por un 400 por ejemplo, para obtener una duración de 400ms.