Maintain Scroll
Position On Post-back is not working -
how to debug ?
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.
It have 2 exampale: Exa1 and Exa2
Description:
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
Exa1 :
This is a small example how to maintain
scroll position of the page/div during refresh with the help of
several lines of javascript code:
Here
is the code:
</script>
// function saves scroll
position
function fScroll(val)
{
var hidScroll = document.getElementById('hidScroll');
hidScroll.value = val.scrollTop;
}
// function moves scroll
position to saved value
function fScrollMove(what)
{
var hidScroll = document.getElementById('hidScroll');
document.getElementById(what).scrollTop =
hidScroll.value;
}
</script>
</head>
<body onload="fScrollMove('div_scroll');" onunload="document.forms(0).submit()";>
<form>
<input type="text" id="hidScroll"
name="a">< /br>
<div id="div_scroll"
onscroll="fScroll(this);"
style="overflow:auto;height:100px;width:100px;">
.. VERY LONG TEXT GOES HERE
</div>
</form>
</body>
</html>
*************************************************************************************
Exa2 :
<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
thanks......