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>


No comments:

Post a Comment