Атрибут 'вершины' изменения JQUERY onClick
Я пытаюсь создать вертикальный скроллер с помощью jQuery, и я испытываю затруднения из-за своего кода..
function scrolldown() {
var newtop = $('.scroll-content').css('top') + '250';
$('.scroll-content').css({top: newtop});
}
CSS:
.scroll-content {position:absolute; top:0px}
Никакие проблемы с CSS я могу изменить значения в поджигателе и хорошо работаю, но код является проблемой. Я хочу, чтобы это добавило 250 пкс к текущему значению, но это не работает и при использовании .html(newtop) я вижу, что вывод для "главного" значения является 0px250 … какие-либо идеи, что я делаю неправильно?
4 ответа
$('.scroll-content').css('top')
вернет что-то вроде «123px», что является строкой (из-за «px»). Если вы добавите «250», у вас будет «123px250», что вам не подходит ...
Попробуйте вместо этого:
var newtop = $('.scroll-content').position().top + 250;
$('.scroll-content').css('top', newtop + 'px');
Вам нужно преобразовать строку css ('0px') в int (0), чтобы вы могли добавить 250, затем снова добавить 'px'
function scrolldown() {
var newtop = parseInt($('.scroll-content').css('top')) + 250;
$('.scroll-content').css({top: newtop+'px'});
}
В качестве альтернативы размещенным ответам, вы можете использовать += через .animate() без длительности, например так:
$(".scroll-content").animate({ top: "+=250px" }, 0);
Это сделает изменение, добавляющее 250px мгновенно. Если вы действительно хотите, чтобы это было анимировано, просто измените 0 на 400, например, чтобы получить длительность 400 мс.
Убедитесь, что вы добавляете целое число к вашему верхнему значению, а не строка. см. ниже:
var newtop = $('.scroll-content').css('top') + 250;
$('.scroll-content').css({top: newtop}); }