Jquery to scroll down or up OnClick of an anchor tag

Recently i was working on an MVC master detail grid UI. There is a master grid which shows link to detail grid. When you click on the link of any row, a detail grid appears below the master grid. So the issue was detail grid did not have focus onclick of master link. which was very much desired by the user.

Here is a the small piece of jquery code which solved the problem. It not only scrolls down but also provides a decent animation effect while sliding down/up.

$(function () {
$(".productsLink").live('click', function () {
$('html,body').animate({scrollTop: $("#products").offset().top }, "slow");

Where products is the id of detail div.

Hope it helps!


About saxenapraveen

I have 14 years of experience in enterprise software development,designing and leading team to provide reliable and scalable solutions for cloud and device ready businesses.

Posted on December 29, 2011, in .NET, ASP.NET MVC, Jquery. Bookmark the permalink. Leave a comment.

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 )

Google photo

You are commenting using your Google 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

%d bloggers like this: