Animating jump points in Smooth Div Scroll

I'm using the jQuery plugin Smooth Div Scroll on a site right now, and it's filling my needs nicely. The site is built on Drupal 6, and SDS requires jQuery 1.5, so some jiggery-pokery is needed to get all the right libraries in the right places. Drupal 6 includes jQuery 1.2, and the Drupal 6 version of jQuery Update only takes that up to jQuery 1.3. I had to mess with my theme's phptemplate_preprocess_page() function to make it all work. I don't think this is a common enough problem to bother posting about my specific solution, but here's the code I started with.

Once I was able to get it working on the pages of interest, Smooth Div Scroll has done a fine job.

The goal is a gallery with a smooth, horizontally scrolling image carousel, with thumbnails below for jumping directly to certain images. Smooth Div Scroll does this very well using its "moveToElement" method. The only problem is a distinct lack of smoothness — it just jumps straight to the image instead of animating.

I was pretty sure this wouldn't be difficult to fix. On line 384 of the non-minimized jquery.smoothDivScroll file, there's this line:

el.data("scrollWrapper").scrollLeft(el.data("scrollXPos"));

Just like it says, it sets the scrollable area's left position to whatever it's supposed to be directly, with no animation. To make it animate, replace that line with this:

el.data("scrollWrapper").animate({'scrollLeft', el.data("scrollXPos")}, 'slow');

Same thing, but with a "slow" animation. Nice!

Comments

alvar

I tried this, but it is breaking the script.

Chrome: Uncaught SyntaxError: Unexpected token , jquery.smoothDivScroll-1.1.js:384

FF, Firebug: missing : after property id jquery...-1.1.js (line 384)

Joe

Hi Alvar,

I'm not sure what to tell you. It sounds like an incomplete pasting of the line, but it's hard to say without seeing it. Do you have other modifications in your version of Smooth Div Scroll?

Comments are closed on this post to keep spammers at bay. If you want to chime in, please email or send a tweet.