Maintain Scroll Position
-
I found many solution for this from my searches. But none worked. I have a page that is HTML, and one would think that JavaScript to do this would be simple and universally available. But, alas, that is not the case. Does anyone have a solution for this that works? Bobby
-
I found many solution for this from my searches. But none worked. I have a page that is HTML, and one would think that JavaScript to do this would be simple and universally available. But, alas, that is not the case. Does anyone have a solution for this that works? Bobby
BobbyStrain wrote:
Does anyone have a solution for this that works?
There are tons of examples online so if something isn't working for you then yours must be different somehow. I suggest posting the code you have so people can look at it.
There are only 10 types of people in the world, those who understand binary and those who don't.
-
I found many solution for this from my searches. But none worked. I have a page that is HTML, and one would think that JavaScript to do this would be simple and universally available. But, alas, that is not the case. Does anyone have a solution for this that works? Bobby
There's 2 approaches you can take
window.scrollTo(0,0);
DOM_ELEMENT.scrollIntoView(false);
Here's a little example :)
<html>
<body onload='createAnnoyingStuff()' onscroll='preventScroll()' style='text-align:center'/>
<script>
function createAnnoyingStuff(){
for(var i=0;i<100;i++){
document.body.appendChild(document.createTextNode('Pete and Repeat were on a boat. Pete fell out, who was left?'));
document.body.appendChild(document.createElement('br'));
}
document.body.appendChild(document.createTextNode('The End'));
}
function preventScroll(){
window.scrollTo(0,0);
}
</script>
</html>There's no way to get to "The End" which is at the bottom of the body Does this help at all?
-
There's 2 approaches you can take
window.scrollTo(0,0);
DOM_ELEMENT.scrollIntoView(false);
Here's a little example :)
<html>
<body onload='createAnnoyingStuff()' onscroll='preventScroll()' style='text-align:center'/>
<script>
function createAnnoyingStuff(){
for(var i=0;i<100;i++){
document.body.appendChild(document.createTextNode('Pete and Repeat were on a boat. Pete fell out, who was left?'));
document.body.appendChild(document.createElement('br'));
}
document.body.appendChild(document.createTextNode('The End'));
}
function preventScroll(){
window.scrollTo(0,0);
}
</script>
</html>There's no way to get to "The End" which is at the bottom of the body Does this help at all?
Simeon, Thank you for responding. I should have been more specific in my question. What I want to do is to maintain scroll position on post-back. But, strangely enough, my pages are now maintaining position on post-back. When I first had the problem several years ago, I added an AJAX update panel to solve the issue. When I recently updated one of the pages, it didn't maintain position even though it still has an update panel. Everything seems to be working fine now on all my pages, those with the update panel and those without it. So I have moved on to my next challenge. My site on GoDaddy won't run with .NET 4, even though it is compiled by VS 2010 to target .NET 4. But, this compilation still runs under 3.5. And, I have another question for JavaScript to resolve some other issues. Maybe you will take a look at that subject, too. Thanks for your help. I'll file your response so I can readily retrieve it. Bobby