JQUERY 点击事件改变“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中更改值并且运行良好，但是代码有问题。我想将其添加250个像素到当前值，但它不起作用，当使用.html（newtop）时，我可以看到“top”值的输出为0px250…… 有什么想法我做错了什么吗？

- Matthew Pateman

Answer 1

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

将返回类似于“123px”的字符串（因为有“px”）。如果你添加“250”，你得到的是“123px250”，这不是你想要的...

试试这个：

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

- opatut

Answer 2

您需要将CSS字符串（'0px'）转换为整数（0），以便您可以添加250，然后再次添加“ px”。

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

- Ties

Answer 3

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

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

这将立即添加250像素的更改。如果您实际上想要动画效果，只需将0更改为400，例如，以获得400毫秒的持续时间。

- Nick Craver

---

@cdutson - 对于任何具有CSS“top”属性的内容都是如此...我不确定它如何影响，如果您查看问题，OP包括样式，这是一个position: absolute;元素。 - Nick Craver

Answer 4

请确保将整数添加到您的顶部值，而不是字符串。请参见以下内容：

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

- nicholasklick