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

13 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.

anandavel anandavelo said...

its very helpfull foe me

Rajkumar Bandela said...

Good yaarrrrr

Bala Ganesh said...

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

RAJNISH TIWARI 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

Give your Valuable Comments

Other Related Posts

© 2010-2012 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.