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