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 usingjQuery 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
No comments:
Post a Comment