jQuery：当margin-top＆lt;时，停止滚动文本0

Question

我得到滚动文本，2个按钮工作正常，但我似乎无法让它停止。如果边距＆lt;我试图禁用按钮。 0和if语句。

请在此处查看演示：

http://jsbin.com/udumos/2/edit

代码：

$(function() {

    var margin = parseInt(jQuery('#content').css('margin-top'), 10);

    $('#scroll-down').click(function() {

        $('#content').animate({
            'margin-top': '+=50'
        }, 1000);

        return margin;

    });

    if (margin > 0) {
        $('#scroll-up').click(function() {

            $('#content').animate({
                'margin-top': '-=50'
            }, 1000);

        });
    }

});

Answer 1

您需要更新每次点击事件的保证金。

$(function () {
    $('#scroll-down').click(function () {
        $('#content').animate({
            'margin-top': '+=50'
        }, 1000);
        return margin;
    });

    $('#scroll-up').click(function () {
        var margin = parseInt(jQuery('#content').css('margin-top'), 10);
        if (margin >= 0) {
            $('#content').animate({
                'margin-top': '-=50'
            }, 1000);
        }
    });
});

Answer 2

您需要在点击内移动该if语句。您还需要在每次单击时更新保证金。然后我也想把if语句放在向下点击以确保它不能向下移动，如果你在顶部。

updated jsbin

的jQuery

$(function(){

   var margin = parseInt(jQuery('#content').css('margin-top'), 10);

   $('#scroll-down').click(function(){
       if( margin > 0 ) {
           // Update margin
           margin -= 50;
           $('#content').animate({
              'margin-top': '+=50'
           }, 1000);
       }
   });


   $('#scroll-up').click(function(){
       // Update margin
       margin += 50;
       $('#content').animate({
          'margin-top': '-=50'
       }, 1000);
   });
});