JQUERY的onClick变化“顶”属性

Question

我试图使用jQuery创建一个垂直卷轴，我有我的代码的麻烦..

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

的CSS：

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

没有问题CSS我可以改变萤火虫的值，并能正常工作，但代码是问题。我希望它将250px添加到当前值，但它不起作用，当使用.html(newtop)时，我可以看到“top”值的输出是0px250 ...任何想法我做错了什么？

Answer 1

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

将返回类似“123px”的东西，这是一个字符串（由于“px”）。如果加上“250”，你有“123px250”，这是不是你想要的...

试试这个来代替：

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

Answer 2

确保要添加到您的顶值的整数不是一个字符串。见下图：

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

Answer 3

您需要的CSS字符串（ '0像素'）转换成一个int（0），所以你可以添加250，然后添加 'PX' 再次

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

Answer 4

作为替代发布的答案，您可以通过.animate()使用+=快捷方式，没有时间，像这样：

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

这将使改变增加250像素瞬间。如果你真的想动画，只需将0改为400即可，例如获得400ms的持续时间。