Scroll a page automatically to a specific position using jQuery

If you have a requirement where you want to scroll your page to a certain position with animation, then here's a single line of jQuery code that does that:


<html xmlns="http://www.w3.org/1999/xhtml">


<head runat="server">


<title></title>


<script src="Scripts/jquery-1.3.2.js" type="text/javascript"></script>


<script type="text/javascript">


    $(document).ready(function() {


                $('html, body').animate({ scrollTop: 850 }, 'slow');


    });    


</script>


</head>


<body>


<form id="form1" runat="server">


<div>


<p>Lorel Ipsum Lorel Ipsum Lorel Ipsum.</p>


<p>Lorel Ipsum Lorel Ipsum Lorel Ipsum.</p>


<p>Lorel Ipsum Lorel Ipsum Lorel Ipsum.</p>


<p>Lorel Ipsum Lorel Ipsum Lorel Ipsum.</p>


<p>Lorel Ipsum Lorel Ipsum Lorel Ipsum.</p>


<p>Lorel Ipsum Lorel Ipsum Lorel Ipsum.</p>


<p>Lorel Ipsum Lorel Ipsum Lorel Ipsum.</p>


<p>Lorel Ipsum Lorel Ipsum Lorel Ipsum.</p>


<p>Lorel Ipsum Lorel Ipsum Lorel Ipsum.</p>


<p>Lorel Ipsum Lorel Ipsum Lorel Ipsum.</p>


<p>Lorel Ipsum Lorel Ipsum Lorel Ipsum.</p>


<p>Lorel Ipsum Lorel Ipsum Lorel Ipsum.</p>


<p>Lorel Ipsum Lorel Ipsum Lorel Ipsum.</p>


<p>Lorel Ipsum Lorel Ipsum Lorel Ipsum.</p>


<p>Lorel Ipsum Lorel Ipsum Lorel Ipsum.</p>


<p>Lorel Ipsum Lorel Ipsum Lorel Ipsum.</p>


<p>Lorel Ipsum Lorel Ipsum Lorel Ipsum.</p>


<p>Lorel Ipsum Lorel Ipsum Lorel Ipsum.</p>


<p>Lorel Ipsum Lorel Ipsum Lorel Ipsum.</p>


<p>Lorel Ipsum Lorel Ipsum Lorel Ipsum.</p>


<p>Lorel Ipsum Lorel Ipsum Lorel Ipsum.</p>


<p>Lorel Ipsum Lorel Ipsum Lorel Ipsum.</p>


<p>Lorel Ipsum Lorel Ipsum Lorel Ipsum.</p>


<p>Lorel Ipsum Lorel Ipsum Lorel Ipsum.</p>


<p>Lorel Ipsum Lorel Ipsum Lorel Ipsum.</p>


<p>Lorel Ipsum Lorel Ipsum Lorel Ipsum.</p>


<p>Lorel Ipsum Lorel Ipsum Lorel Ipsum.</p>


<p>Lorel Ipsum Lorel Ipsum Lorel Ipsum.</p>


<p>Lorel Ipsum Lorel Ipsum Lorel Ipsum.</p>


<p>Lorel Ipsum Lorel Ipsum Lorel Ipsum.</p>


<p>Lorel Ipsum Lorel Ipsum Lorel Ipsum.</p>


<p>Lorel Ipsum Lorel Ipsum Lorel Ipsum.</p>


<p>Lorel Ipsum Lorel Ipsum Lorel Ipsum.</p>


<p>Lorel Ipsum Lorel Ipsum Lorel Ipsum.</p>


<p>Lorel Ipsum Lorel Ipsum Lorel Ipsum.</p>


<p>Lorel Ipsum Lorel Ipsum Lorel Ipsum.</p>


<p>Lorel Ipsum Lorel Ipsum Lorel Ipsum.</p>


<p>Lorel Ipsum Lorel Ipsum Lorel Ipsum.</p>


<p>Lorel Ipsum Lorel Ipsum Lorel Ipsum.</p>


<p>Lorel Ipsum Lorel Ipsum Lorel Ipsum.</p>


<p>Lorel Ipsum Lorel Ipsum Lorel Ipsum.</p>


<p>Lorel Ipsum Lorel Ipsum Lorel Ipsum.</p>


<p>Lorel Ipsum Lorel Ipsum Lorel Ipsum.</p>


<p>Lorel Ipsum Lorel Ipsum Lorel Ipsum.</p>


<p>Lorel Ipsum Lorel Ipsum Lorel Ipsum.</p>


<p>Lorel Ipsum Lorel Ipsum Lorel Ipsum.</p>


<p>Lorel Ipsum Lorel Ipsum Lorel Ipsum.</p>


<p>Lorel Ipsum Lorel Ipsum Lorel Ipsum.</p>


<p>Lorel Ipsum Lorel Ipsum Lorel Ipsum.</p>


</div>


</form>


</body>


</html>







About The Author

Suprotim Agarwal
Suprotim Agarwal, Developer Technologies MVP (Microsoft Most Valuable Professional) is the founder and contributor for DevCurry, DotNetCurry and SQLServerCurry. He is the Chief Editor of a Developer Magazine called DNC Magazine. He has also authored two Books - 51 Recipes using jQuery with ASP.NET Controls. and The Absolutely Awesome jQuery CookBook.

Follow him on twitter @suprotimagarwal.
Posted by

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)