animate scrolling in scrollbars

Question

Is there any plugin available for jquery to animate the scroll? Say I have few scrollbars in the window. I want that whenever user is scrolling the scrollbar should animate and not appear instantaneously.

To get an exact idea of what I am trying to achieve, see this:

http://demo.xceed.com/DataGrid_Silverlight/Demo_1.3/

This is in Silverlight.

See how it scrolls in fluid manner. I want to achieve the same effect but using jquery. Is this possible?

Thanks.

Answer 1

1. Use jQuery UI: http://jqueryui.com/demos/slider/#default .

2. Insert code into the ready handler as shown here:

    var width = $('#scrollable').width() - $('#wrapper').width(); $('#slider') .slider( { max: width }) .bind('slide', function(event, ui) { $('#scrollable').stop().animate( { right: ui.value }, 1000 ); }); 

3. HTML:

    <div id="wrapper"> <div id="scrollable"><!-- bla bla --></div> <div id="slider"></div> </div> 

4. Don't forget to hide the scrollbar:

    #wrapper { text-align: left; width: 900px; height: 600px; margin: 0 auto; border: 1px solid black; overflow: hidden; position: relative; } 

Answer 2

Some thing like this might help.

$("html, body").animate({
            scrollTop: 0
        }, "slow");

Answer 3

You could make your own custom "sliders" using jQuery UI, and then upon change, do what "userD" suggested. One slider would be horizontal, one vertical (of course).

Then you'd want to hide the browsers actual scroll bars for the particular div by using css ("overflow: hidden;")

Here's was @userD suggested....

$("html, body").animate({ scrollTop: 0 }, "slow");

You would of course change that to "#myDiv" instead of "html, body".

Answer 4

A nice light plugin jQuery .scrollTo. Found here: Arial Fiesler Blog

sytanx is easy $('div').scrollTo(#anchorindiv,{duration:1000});