Programatic scrolling animation

Author: mzubala

README.textile

@@ -18,12 +18,11 @@ To use the plugin you obviously need jQuery (it should work in jQuery 1.4 and la
 
 h2. Download
 
-You can download the latest version "here":https://github.com/mzubala/jquery-custom-scrollbar/raw/master/build/jquery-custom-scrollbar-0.5.2.zip
+You can download the latest version "here":https://github.com/mzubala/jquery-custom-scrollbar/raw/master/build/jquery-custom-scrollbar-0.5.3.zip
 
 h2. Demos
 
-In <code>demos</code> folder of this repo, there are some example usages of custom scrollbar and its api. The demos are also
-available online "here":http://jquery-custom-scrollbar.rocketmind.pl/
+In <code>demos</code> folder of this repo, there are some example usages of custom scrollbar and its api. The demos are also available online "here":http://jquery-custom-scrollbar.rocketmind.pl/
 
 h2. Usage
 
@@ -54,8 +53,7 @@ Add a skin class to your container:
 </div>
 </pre></code>
 
-In the example we use <code>default-skin</code>. Plugin comes with two other predefined skins: <code>gray-skin</code> and <code>modern-skin</code>.
-You are not limited to that and you can style scrollbar your own way.
+In the example we use <code>default-skin</code>. Plugin comes with two other predefined skins: <code>gray-skin</code> and <code>modern-skin</code>. You are not limited to that and you can style scrollbar your own way.
 
 Finally call this js code:
 
@@ -82,15 +80,20 @@ h2. Options
 There are some options you can pass when initializing scrollbar:
 
 |_. Option |_. Type|_. Default value |_. Description |
-| <code>skin</code>|<code>String</code>|<code>undefined</code>|A css skin class that will be added to the scrolled container. You can define it in html as well as here in options. Note that skin has to be defined in one of those ways.|
+| <code>animationSpeed</code> | <code>Integer</code> | <code>300</code> | Speed of the animation of programatic scrolling.|
 | <code>hScroll</code> | <code>Boolean</code> | <code>true</code> | Indicates whether or not, horizontal scrollbar should be shown when it's necessary. |
-| <code>vScroll</code> | <code>Boolean</code> | <code>true</code> | Same as above but applies to vertical scrollbar. |
+| <code>skin</code>|<code>String</code>|<code>undefined</code>|A css skin class that will be added to the scrolled container. You can define it in html as well as here in options. Note that skin has to be defined in one of those ways.|
 | <code>updateOnWindowResize</code> | <code>Boolean</code> | <code>false</code> | Indicates whether scrollbar should recalculate thumb size when window is resized. See <code>demos/resize.html</code> for an example.|
+| <code>vScroll</code> | <code>Boolean</code> | <code>true</code> | Same as above but applies to vertical scrollbar. |
 
 For example:
 
 <pre><code>
-$("#my-container").customScrollbar({skin: "default-skin", hScroll: false, updateOnWindowResize: true})
+$("#my-container").customScrollbar({
+  skin: "default-skin", 
+  hScroll: false,
+  updateOnWindowResize: true
+  })
 </pre></code>
 
 h2. API
@@ -99,23 +102,23 @@ There are some methods of the plugin you may want to call.
 
 h3. scrollTo(element)
 
-Scrolls viewport to a given element inside scrolled content. An element might be jQuery object or a selector string. Example usage:
+Scrolls viewport to a given element inside scrolled content. An element might be jQuery object or a selector string. To controll animation speed use <code>animationSpeed</code> initialization option. Example usage:
 
 <pre><code>
 $(".container").customScrollbar("scrollTo", "#some-element-inside-container")
 </pre></code>
 
 h3. scrollToX(x)
 
-Sets horizontal scrollbar position to <code>x</code> pixels. <code>x</code> should be in range from 0 to scrolled content width. If it's outside that range, content will be scrolled to the start or to the end.
+Sets horizontal scrollbar position to <code>x</code> pixels. <code>x</code> should be in range from 0 to scrolled content width. If it's outside that range, content will be scrolled to the start or to the end. To controll animation speed use <code>animationSpeed</code> initialization option.
 
 <pre><code>
 $(".container").customScrollbar("scrollToX", 100)
 </pre></code>
 
 h3. scrollToY(y)
 
-Sets vertical scrollbar position to <code>y</code> pixels. <code>x</code> should be in range from 0 to scrolled content height. If it's outside that range, content will be scrolled to the start or to the end.
+Sets vertical scrollbar position to <code>y</code> pixels. <code>x</code> should be in range from 0 to scrolled content height. If it's outside that range, content will be scrolled to the start or to the end. To controll animation speed use <code>animationSpeed</code> initialization option.
 
 <pre><code>
 $(".container").customScrollbar("scrollToY", 200)

build/jquery-custom-scrollbar-0.1.0.zip

@@ -1,6 +1,6 @@
 {
   "name":"custom-scrollbar",
-  "version":"0.5.2",
+  "version":"0.5.3",
   "title":"jQuery Custom Scrollbar",
   "author":{
     "name":"Maciej Zubala",

build/jquery-custom-scrollbar-0.1.1.zip

@@ -7,6 +7,7 @@
       hScroll:true,
       vScroll:true,
       updateOnWindowResize:false,
+      animationSpeed: 300,
       onCustomScroll:undefined
     }
 
@@ -121,12 +122,12 @@
 
       scrollToX:function (x) {
         if (this.hScrollbar)
-          this.hScrollbar.scrollTo(x);
+          this.hScrollbar.scrollTo(x, true);
       },
 
       scrollToY:function (y) {
         if (this.vScrollbar)
-          this.vScrollbar.scrollTo(y);
+          this.vScrollbar.scrollTo(y, true);
       },
 
       remove: function() {
@@ -437,18 +438,21 @@
       scrollBy:function (delta) {
         var overviewPosition = -this.scrollable.$overview.position()[this.sizing.offsetComponent()];
         overviewPosition += delta;
-        this.scrollTo(overviewPosition);
+        this.scrollTo(overviewPosition, false);
       },
 
-      scrollTo:function (overviewPosition) {
+      scrollTo:function (overviewPosition, animate) {
         if (overviewPosition < 0)
           overviewPosition = 0;
         if (overviewPosition > this.maxOverviewPosition)
           overviewPosition = this.maxOverviewPosition;
         var oldScrollPercent = this.scrollPercent;
         this.scrollPercent = overviewPosition / this.maxOverviewPosition;
         var thumbPosition = this.scrollPercent * this.maxThumbPosition;
-        this.setScrollPosition(overviewPosition, thumbPosition);
+        if(animate)
+          this.setScrollPositionWithAnimation(overviewPosition, thumbPosition);
+        else
+          this.setScrollPosition(overviewPosition, thumbPosition);
         if (oldScrollPercent != this.scrollPercent)
           this.triggerCustomScroll(oldScrollPercent);
       },
@@ -470,7 +474,16 @@
 
       setScrollPosition:function (overviewPosition, thumbPosition) {
         this.$thumb.css(this.sizing.offsetComponent(), thumbPosition + "px");
-        this.scrollable.$overview.css(this.sizing.offsetComponent(), -overviewPosition + "px");
+        this.scrollable.$overview.css(this.sizing.offsetComponent(), -overviewPosition + "px");      
+      },
+
+      setScrollPositionWithAnimation:function (overviewPosition, thumbPosition) {
+        var thumbAnimationOpts = {};
+        var overviewAnimationOpts = {};
+        thumbAnimationOpts[this.sizing.offsetComponent()] = thumbPosition + "px";
+        this.$thumb.animate(thumbAnimationOpts, this.scrollable.options.animationSpeed);
+        overviewAnimationOpts[this.sizing.offsetComponent()] = -overviewPosition + "px";
+        this.scrollable.$overview.animate(overviewAnimationOpts, this.scrollable.options.animationSpeed);
       },
 
       calculateMaxThumbPosition:function () {
@@ -493,7 +506,7 @@
           var elementOffset = $element.offset();
           var overviewOffset = this.scrollable.$overview.offset();
           var viewPortOffset = this.scrollable.$viewPort.offset();
-          this.scrollTo(elementOffset[this.sizing.offsetComponent()] - overviewOffset[this.sizing.offsetComponent()]);
+          this.scrollTo(elementOffset[this.sizing.offsetComponent()] - overviewOffset[this.sizing.offsetComponent()], true);
         }
       },