Aspdotnet-Suresh

aspdotnet-suresh offers C#.net articles and tutorials,csharp dot net,asp.net articles and tutorials,VB.NET Articles,Gridview articles,code examples of asp.net 2.0 /3.5,AJAX,SQL Server Articles,examples of .net technologies

jQuery Scroll to Particular Div Position When Click on Link

Oct 28, 2012
Introduction:

In this article I will explain how to scroll or move to particular div content when we click on particular link or item using JQuery in asp.net.

Description:

In previous article I explained
jQuery Show Large images preview when hover on image, Generate thumbnail from images in asp.net, Generate thumbnails from YouTube videos using JQuery and many articles relating to JQuery, asp.net, SQL Server etc. Now I will explain how to scroll or move to particular div content when we click on particular link or item using JQuery in asp.net.

Generally in some of websites we will see effects like whenever we click on one particular hyperlink or button automatically page will moved to particular content this kind of feature we can implement by using jQuery Scroll event. For that we need to write the code like as shown below in your page


<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>jquery scroll to particular position/item when click on link</title>
</head>
<body>
<form id="form1" runat="server">
<div >
<p><a id="top">Menu:</a> <!-- Anchor tag placed around the word "Menu" so menu will always be visible -->
<a href="#middle" class="scroll">Middle</a> <a href="#bottom" class="scroll">Bottom</a></p>
<div style="background-color:#c00; width:50%; height:1500px;">Top</div>
<p><a id="middle">Menu:</a> <!-- Anchor tag placed around the word "Menu" so menu will always be visible -->
<a href="#top" class="scroll">Top</a> <a href="#bottom" class="scroll">Bottom</a></p>
<div style="background-color:#2d80e8; width:50%; height:1500px;">Middle</div>
<p><a id="bottom">Menu:</a> <!-- Anchor tag placed around the word "Menu" so menu will always be visible -->
<a href="#top" class="scroll">Top</a> <a href="#middle" class="scroll">Middle</a>
<div style="background-color:#21b81e; width:50%; height:1500px;">Bottom</div>
</div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script  type="text/javascript">
$(document).ready(function() {
$(".scroll").click(function(event) {
$('html,body').animate({ scrollTop: $(this.hash).offset().top }, 500);
});
});
</script>
</form>
</body>
</html>
Live Demo

To test click on the links TOP, Middle and Bottom links whenever you click on particular link automatically it will moved to that position



If you enjoyed this post, please support the blog below. It's FREE!

Get the latest Asp.net, C#.net, VB.NET, jQuery, Plugins & Code Snippets for FREE by subscribing to our Facebook, Twitter, RSS feed, or by email.

subscribe by rss Subscribe by RSS subscribe by email Subscribe by Email

15 comments :

rams said...

Thank U for this article...

Anonymous said...

can we control the position from top of target div

Anonymous said...

Means, I want the target div at middle of the page instead of at the top

Anonymous said...
This comment has been removed by a blog administrator.
Anonymous said...

Nice article .
You always try to post the utility type article that generally required by new comers.

Thanks.

Indian Premier League 2017 schedule Matches said...

its very helpfull foe me

Unknown said...

Good yaarrrrr

Unknown said...

How Can we give link to next or any other page a id ?

Unknown said...

it is not working when i put the div tag inside the datalist and i click on button placed outside the datalist

YUVRAJ KHAVAD said...

Your script help me solve my problem thanks....

Anonymous said...

Sir in google chrome, this code is not working....My menu buttons are on slider div

Anonymous said...

Thanks

Anonymous said...

Nice post

HayerCRM said...

Thanks for sharing. It worked very well but I have a different problem. I have a search form and on the bottom it, It displays the searched items. I have added jQuery to fire on button click. But the problem is results are loading after focus move which is bringing scroll to top position again. Any way to make it fire after search finished?

ANAND SETHI said...

Sir,
when click the Button then page is postback.I try it that when click the button a particular div content is show page is not postback..
Any idea??

Give your Valuable Comments

Note: Only a member of this blog may post a comment.

© 2015 Aspdotnet-Suresh.com. All Rights Reserved.
The content is copyrighted to Suresh Dasari and may not be reproduced on other websites without permission from the owner.