Home > jQuery > Example: Animating scroll with jQuery

Example: Animating scroll with jQuery


A reader asked for an example of using the jQuery scroll code I had written a while back.  Based on that code, here is the example:

<div id="myDiv" style="width: 500px; height: 100px; overflow: auto; border: 1px solid black;"></div>
<form>
  <input type="text" id="myTextInput" />
  <input type="button" value="Send" id="postButton" />
</form>
<script type="text/javascript">
  $(document).ready(function(){
      $('#postButton').click(function(){
      $('#myDiv').append($('#myTextInput').val() + '<br/>');
      $('#myTextInput').val('');
      $("#myDiv").animate({ scrollTop: $("#myDiv").attr("scrollHeight") }, 1000);
    });
  });
</script>

A simple, functional example.

Check out the demo: http://demos.kisdigital.com/index.cfm/demos/scroll

Edit 3/10/10:
Please see the new post here:

http://kisdigital.wordpress.com/2010/03/10/using-jquery-to-scroll-to-the-bottom-of-a-div-revised/

Categories: jQuery
  1. No comments yet.
  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Connecting to %s

Follow

Get every new post delivered to your Inbox.

Join 364 other followers