Introduction :
While there are numerous plugins for scrolling the browser window, doing so can be trivial when a simple scroll is required. By setting the scrollTop CSS property on the <html> and <body> elements, it is possible to control the position of the horizontal or vertical scrolling. In the code below, I use the animate() method to animate the horizontal scrolling to a specific element in the page.
Aspx Code :
<html>
<head>
<title>Scrolling the browser window </title>
</head>
<body>
<style type="text/css">
li
{
padding-bottom: 500px;
}
</style>
<ul>
<li><a href="#" class="next">Next</a></li>
<li><a href="#" class="next">Next</a>/<a href="#" class="prev">Previous</a></li>
<li><a href="#" class="next">Next</a>/<a href="#" class="prev">Previous</a></li>
<li><a href="#" class="prev">Previous</a></li>
</ul>
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
(function ($) {
$('.next').click(function () {
$('html, body').animate({ scrollTop: $(this).parent().next().find('a').offset().top }, 1000);
});
$('.prev').click(function () {
$('html, body').animate({ scrollTop:
$(this).parent().prev().find('a').offset().top }, 1000);
});
})(jQuery);
</script>
</script>
</body>
</html>