Question

I am working on this plugin which scrolls an element to show the hidden content.

But I cannot make it right, for instance,

1. when I scroll the content to reach numbers 7,8 and I want to scroll back one step previous only to reach numbers 5,6 but it scrolls up to reach numbers 1,2.

2. after it reaches up to numbers 1,2 mistakenly, it scrolls straight down to reach numbers 8,9 when I click the more button again.

How can I fix it?

Here is the plugin code,

(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

The problem is the variable scroll_amount. First of all, it always scrolls back to the top because you pass in negative! scroll amount. You don’t want to do that. Second you should modify the scroll amount before the animation rather than after it.

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

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