CODEWITHSUNDEEP
javascriptjqueryhtml
Jaggu
Jaggu

Reputation: 6428

animate scrolling in scrollbars

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.

Upvotes: 4

Views: 2318

Answers (4)

roger
roger

Reputation: 271

  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;
}

Upvotes: 1

comu
comu

Reputation: 921

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

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

Upvotes: 0

Timothy Khouri
Timothy Khouri

Reputation: 31845

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".

Upvotes: 0

Dhiraj
Dhiraj

Reputation: 33618

Some thing like this might help.

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

Upvotes: 0

Related Questions