JQUERY onClick更改'top'属性

Question

我正在尝试使用jquery创建一个垂直滚动条，我的代码遇到麻烦..

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

css：

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

CSS没有问题我可以在firebug中更改值并且工作正常，但代码是问题。我希望它添加250px到当前值，但它不起作用，当使用.html(newtop)我可以看到“顶部”值的输出是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

你需要将css字符串（'0px'）转换为int（0），这样你可以添加250，然后再添加'px'

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

Answer 3

作为已发布答案的替代方法，您可以通过.animate()使用+=快捷方式，无需持续时间，如下所示：

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

这将使更改立即增加250px。如果你真的希望它是动画的，只需将0更改为400，例如，持续时间为400毫秒。

Answer 4

确保在顶部值中添加整数而不是字符串。见下文：

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