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

Question

我正在开发这个插件，它可以滚动一个元素来显示隐藏的内容。

但我不能让它正确，例如，

1. 当我滚动内容以达到数字 7,8并且我想回滚前一步仅达到数字 5,6但它向上滚动以达到数字 1,2。

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

我该如何解决？

这是插件代码，

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