JQUERY onClick ändern 'top' Attribut

Question

Ich versuche, eine vertikale Scrollers mit Jquery zu schaffen, und ich habe Probleme mit meinem Code ..

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

Die CSS:

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

Keine Probleme mit CSS Ich kann Werte in Firebug ändern und funktioniert gut, aber der Code ist das Problem. Ich will es 250px zum aktuellen Wert hinzufügen, aber es funktioniert nicht und wenn ich .html(newtop) benutze, kann ich sehen, dass die Ausgabe für den "oberen" Wert 0px250 ist ... irgendwelche Ideen, was ich falsch mache?

Answer 1

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

wird etwas wie "123px" zurückgeben, was eine Zeichenkette ist (wegen der "px"). Wenn Sie „250“ hinzufügen, haben Sie „123px250“, das ist nicht das, was Sie wollen ...

versuchen diese statt:

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

Answer 2

Vergewissern Sie sich, dass Sie eine ganze Zahl auf Ihre Top-Wert hinzufügen keine Zeichenfolge. siehe unten:

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

Answer 3

Sie müssen die CSS-String ('0px') in einen int (0) konvertieren, so dass Sie kann 250 hinzufügen, fügen Sie dann die 'px' wieder

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

Answer 4

Als Alternative zu den gebuchten Antworten können Sie eine += Abkürzung über .animate() ohne Dauer, wie folgt verwenden:

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

Dies wird die Änderung 250px sofort hinzuzufügen. Wenn Sie es wirklich animiert haben möchten, ändern Sie einfach das 0 in ein 400, um eine 400ms Dauer zu erhalten.