Question

Here are the settings:

$(function()
{
    $('.info').jScrollPane(
        {showArrows: true, hijackInternalLinks: true, animateScroll: true}
    );
}); 

The problem is the animateScroll: true conflicting with the arrows but I need that for my internal anchor links.

I assume this will fix the conflict.
When you click the arrow button: <a class="jspArrow jspArrowDown jspActive"</a> it will change the jScrollPane settings to animateScroll: false then when you unclick it reverts to animateScroll: true

I hope this makese sense. Any help would be great.

Edit

Sorry for not getting back sooner. I have set up a demo, as you can see the down arrow doesn’t work. I think its related to animateScroll: true

http://jsfiddle.net/sVSsy/

Thanks

Answer 1

There is no problem seen on the official scroll_to_animate.html DEMO page using both options you require when the DIV’s width is around 600px.

The solution is to use the jScrollPane arrowButtonSpeed Option with a value other than the default 0 when using smaller sized DIV’s such as your 300px width when using certain browsers, like Chrome.

This jsfiddle update also has a removed asset of a duplicated mouse script, replaced a duplicate ID ‘one’ with an additional ID ‘four’ for DIV content since an ID can only be used once. You’ll see other speed settings with their default values that you can experiment with for any changes in your DIV size.

Here’s the updated jsfiddle:
http://jsfiddle.net/sVSsy/3/