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.
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 Email
|
|||
15 comments :
Thank U for this article...
can we control the position from top of target div
Means, I want the target div at middle of the page instead of at the top
Nice article .
You always try to post the utility type article that generally required by new comers.
Thanks.
its very helpfull foe me
Good yaarrrrr
How Can we give link to next or any other page a id ?
it is not working when i put the div tag inside the datalist and i click on button placed outside the datalist
Your script help me solve my problem thanks....
Sir in google chrome, this code is not working....My menu buttons are on slider div
Thanks
Nice post
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?
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??
Note: Only a member of this blog may post a comment.