My goal is to have a clickable button/link to scroll to a certain position in a page. I have referenced from this answer by Michael Whinfrey, the code works perfectly on fiddle but not on mine.
This may be a bit messy but I have multiple GridViews in a table, and some td has div and some don't. Also in the code behind I have the following code in Page_load.
Page.MaintainScrollPositionOnPostBack = false;
Below is my aspx page simplified.
<html>
<head>
<script type="text/javascript">
function scrollTo(name) {
ScrollToResolver(document.getElementById(name));
}
function ScrollToResolver(elem) {
var jump = parseInt(elem.getBoundingClientRect().top * .2);
document.body.scrollTop += jump;
document.documentElement.scrollTop += jump;
if (!elem.lastjump || elem.lastjump > Math.abs(jump)) {
elem.lastjump = Math.abs(jump);
setTimeout(function () { ScrollToResolver(elem); }, "100");
} else {
elem.lastjump = null;
}
}
</script>
</head>
<body>
.......some input/textbox......
<button onclick="scrollTo('divDesignation')">TEST</button>
<div>
<table>
<tr>
<td>
<asp:GridView id="gv1" .....>
......the whole table has 6~7 rows of GridView data that is not displaying here.....
<tr>
<td>
<div id="divDesignation" runat="server" style="max-height:600px; overflow-y:auto;">
<asp:GridView id="gvDesignation" ......
</div>
</td>
</tr>
</body>
</html>
I am trying to scroll to the divDesignation when click the button but it simply will not.
Any help is appreciated.
