JQUERY onClick changement 'top' attribut

Question

Je suis en train de créer une barre de défilement vertical à l'aide jquery et j'ai des problèmes avec mon code ..

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

Le css:

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

Aucun problème avec CSS Je peux changer les valeurs dans firebug et fonctionne bien, mais le code est le problème. Je veux qu'il ajoute 250px à la valeur actuelle, mais cela ne fonctionne pas et lorsque vous utilisez .html(newtop) je peux voir que la sortie pour la "top" de la valeur est 0px250 ... des idées que je fais mal?

Answer 1

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

retournera quelque chose comme "123px", qui est une chaîne (en raison de la "px"). Si vous ajoutez « 250 », vous avez « 123px250 », ce qui est pas ce que vous voulez ...

Essayez plutôt celui-ci:

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

Answer 2

Assurez-vous que vous ajoutez un entier à votre valeur supérieure pas une chaîne. voir ci-dessous:

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

Answer 3

Vous devez convertir la chaîne css ('0px') dans un int (0) de sorte que vous pouvez ajouter 250, puis ajouter le 'px' à nouveau

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

Answer 4

En tant alternative aux réponses affichées, vous pouvez utiliser un raccourci += via .animate() sans durée, comme ceci:

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

cela fera le changement d'ajouter instantanément 250px. Si vous voulez réellement l'animer, changez simplement ce 0 en 400 par exemple, pour obtenir une durée de 400ms.