使用 jquery.animate 和 jquery.scrolltop 垂直滚动内容

Question

我正在处理这个plugin，它会滚动一个元素以显示隐藏的内容。

但我无法做到，例如，

1. 当我滚动内容以达到 数字 7,8 并且我想向后滚动上一步只是为了达到 数字 5,6 但它滚动最多达到数字 1,2。

2. 在错误地到达 数字 1,2 后，当我再次单击 more 按钮时，它会直接向下滚动以到达 数字 8,9 .

我该如何解决？

这是插件代码，

(function($){

   $.fn.extend({ 

        scroll_up_down: function(options) {

            var defaults = {
                associateScroller:           '.less',
                scrollTarget:                '.items-thread',
                scrollAmount:                40,
                callback:                     function() {}
            }

            var options =  $.extend(defaults, options);
            var o = options;
            var scroll_amount =  o.scrollAmount;
            var associate_scroller = o.associateScroller


            var $cm = this.click(function(e){

                // Set the varible.
                var object = $(this);
                var scroll_target = $(o.scrollTarget);

                scroll_target.animate({scrollTop:scroll_amount}, 500);

                scroll_amount += o.scrollAmount;


                return false;

            });

            var $cm_2 = $(associate_scroller).click(function(e){

                // Set the varible.
                var scroll_target = $(o.scrollTarget);

                scroll_target.animate({scrollTop:-scroll_amount}, 500);
                scroll_amount -= o.scrollAmount;


                return false;
            });



        }
    });

})(jQuery);

Answer 1

问题是变量scroll_amount。首先，它总是会滚动回顶部，因为您传入的是负数！滚动量。你不想那样做。其次，您应该在动画之前而不是之后修改滚动量。

http://jsfiddle.net/CxbYf/2/

scroll_amount = ...;
scroll_target.animate({scrollTop:scroll_amount}, 500);