Geek Answers Handbook

Animated Scrolling in Scroll Bars

Is there any jquery plugin for scroll animation? Say I have few scroll bars in the window. I want that whenever the user scrolls the scroll bar, it should be animated and not appear instantly.

To get an accurate idea of ​​what I'm trying to achieve, see this:

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

This is in Silverlight.

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

Thanks.

+4
source share
4 answers
  • Use jQuery UI: http://jqueryui.com/demos/slider/#default .

  • Paste the code into the finished handler, as shown below:

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

  • HTML:

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

  • Remember to hide the scroll bar:

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

Some things like this may help.

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

You can create your own “sliders” using jQuery UI, and then after the change do what “userD” suggested. One slider will be horizontal, one vertical (of course).

Then you want to hide the actual browser scrollbars for a particular div using css ("overflow: hidden;")

@UserD was suggested here ....

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

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

0
source

Good lightweight jQuery.scrollTo plugin. Found here: Arial Fiesler Blog

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

0
source

More articles:


All Articles