jQuery：当 margin-top < 0 时停止滚动文本

Question

我得到带有 2 个按钮的滚动文本工作正常，但我似乎无法让它停止。如果margin

请在此处查看演示：

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