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 Я могу изменить значения в 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

Убедитесь, что вы добавляете целое число к вашему верхнему значению не строка. смотри ниже:

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

Answer 3

Вы должны преобразовать CSS строку ('0px') в межд (0), так что вы можете добавить 250, а затем добавить 'точек' снова

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);​ 

Это сделает изменения, добавив 250px мгновенно. Если вы действительно хотели его анимировать, просто измените это значение 0 на 400, например, чтобы получить длительность 400 мс.