jQuery onClick thay đổi 'top' thuộc tính

Question

tôi đang cố gắng để tạo ra một cuộn dọc sử dụng jquery và tôi đang gặp rắc rối với mã của tôi ..

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

Các css:

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

Không có vấn đề với CSS Tôi có thể thay đổi giá trị trong firebug và hoạt động tốt, nhưng mã là vấn đề. Tôi muốn nó để thêm 250px để giá trị hiện tại nhưng nó không hoạt động và khi sử dụng .html(newtop) tôi có thể thấy rằng đầu ra cho "top" giá trị là 0px250 ... bất kỳ ý tưởng những gì tôi đang làm sai?

Answer 1

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

sẽ trả về cái gì đó như "123px", là một chuỗi (do "px"). Nếu bạn thêm "250", bạn phải "123px250", mà không phải là những gì bạn muốn ...

Hãy thử này thay vì:

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

Answer 2

Hãy chắc chắn rằng bạn đang thêm một số nguyên với giá trị hàng đầu của bạn không phải là một chuỗi. xem dưới đây:

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

Answer 3

Bạn cần phải chuyển đổi chuỗi css ('0px') vào (0) một int, do đó bạn có thể thêm 250, sau đó thêm 'px' một lần nữa

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

Answer 4

Là một thay thế cho câu trả lời được đăng, bạn có thể sử dụng một phím tắt += qua .animate() không có thời gian, như thế này:

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

này sẽ thực hiện thay đổi thêm 250px ngay lập tức. Nếu bạn thực sự muốn nó hoạt hình, chỉ cần thay đổi 0 thành một ví dụ 400 để có thời lượng 400ms.