Resetting the scroll position after submit

Discussion in 'JavaScript' started by redrum, Jun 16, 2008.

0
  1. #1
    Is there a way to get the scroll to return to it's last position after a form is submited.
    I guess this could be made by anchor, but is there a way to do this whitout anchor. I also guess it could be made in ASP, but I use php and Linux.

    Any ideas?

    Thanks,
    Fredrik
     
    redrum, Jun 16, 2008 IP
  2. ajsa52

    ajsa52 Well-Known Member

    Messages:
    3,426
    Likes Received:
    125
    Best Answers:
    0
    Trophy Points:
    160
    #2
    You can try using the focus() function over your desired HTML element.
     
    ajsa52, Jun 16, 2008 IP
  3. redrum

    redrum Peon

    Messages:
    18
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #3
    You don't happen to have a more detailed example?

    Thanks
     
    redrum, Jun 16, 2008 IP
  4. ajsa52

    ajsa52 Well-Known Member

    Messages:
    3,426
    Likes Received:
    125
    Best Answers:
    0
    Trophy Points:
    160
    #4
    Well I've tried with focus(), but work only with some HTML elements.
    So is best with this method:
    - Find the position (x,y) of desired element
    - Jump to that position with window.scroll()

    Example:
    
<html>
<head>
<style type="text/css">
#d1 { height: 1200px; background-color: yellow; }
#d2 { height: 1200px; background-color: green; }
#d3 { height: 1200px; background-color: pink; }
</style>
<script type="text/javascript">
function jump( pId )
{
  obj = document.getElementById(pId);	
	var curleft = curtop = 0;
	if (obj.offsetParent) 
	{
		curleft = obj.offsetLeft
		curtop = obj.offsetTop
		while (obj = obj.offsetParent) 
		{
			curleft += obj.offsetLeft
			curtop += obj.offsetTop
		}
	}
	window.scroll( curleft, curtop );
}
</script>
</head>
<body onLoad="jump('d2');">
  <div id="d1">D1</div>
  <div id="d2">D2</div>
  <div id="d3">D2</div>
</body>
</html>
    Code (markup):
     
    ajsa52, Jun 16, 2008 IP
  5. Logic Ali

    Logic Ali Well-Known Member

    Messages:
    170
    Likes Received:
    5
    Best Answers:
    0
    Trophy Points:
    108
    #5
    I think RecoverScroll can handle that.
     
    Logic Ali, Jun 17, 2008 IP
  6. redrum

    redrum Peon

    Messages:
    18
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #6

    Thanks :)
    But as faar I can see when I tested this, the page goes directly to d2, its more like an anchor function. However I think this might be useful in some other areas. But not in this particular one.
     
    redrum, Jun 18, 2008 IP
  7. redrum

    redrum Peon

    Messages:
    18
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #7
    This was i nice function, abit too nice for my demands :)
    The drawbacks by using this as it is, is that it remember the scroll position all the time. It can be limited to certin pages, but if you return to a page you once have visited (in the same session) it still remember the position.
    What would be ideal is if I can limit the script to only kick in when you hit a form button. But perhaps it can be modified to to that.
    I will look into this, of find somone that can do it.

    If anyone of you are familiar with js and want to do it send me a PM.

    A little more in detail what Im trying to achieve, I have a list with items, and a buy-button for each item. When you hit the buy-button i want the page to return to the last scroll position.
     
    redrum, Jun 18, 2008 IP
  8. Logic Ali

    Logic Ali Well-Known Member

    Messages:
    170
    Likes Received:
    5
    Best Answers:
    0
    Trophy Points:
    108
    #8

    In the init function, comment-out or delete these two separate lines:

    this.addToHandler(window,'onscroll',function(){RecoverScroll.reset()});    

// and

this.record();
    Code (markup):
    Then in each relevant button's tag, include:

    onclick="RecoverScroll.record()"
    Code (markup):
    I think that should do it.
     
    Logic Ali, Jun 18, 2008 IP
  9. redrum

    redrum Peon

    Messages:
    18
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #9
    I did this, and removed the body/window onload event.

    If I use 
    onclick="RecoverScroll.record()"
    Code (markup):
    nothing happens, when the page reload it starts at the top agian.

    I also tried 
    onclick="RecoverScroll.init()"
    Code (markup):
    Then the page scrolls up to the top right away, then it reloads due to the new item in cart.
     
    redrum, Jun 18, 2008 IP
  10. ajsa52

    ajsa52 Well-Known Member

    Messages:
    3,426
    Likes Received:
    125
    Best Answers:
    0
    Trophy Points:
    160
    #10
    That was an example, there you can see: <body onLoad="jump('d2');">
    If you want to jump to other position, simply use the jump('id') function with your submission form using the id of the element you want to be visible on window top.
     
    ajsa52, Jun 18, 2008 IP
  11. Logic Ali

    Logic Ali Well-Known Member

    Messages:
    170
    Likes Received:
    5
    Best Answers:
    0
    Trophy Points:
    108
    #11
    Something must be overriding the onload handler - do you have another script using it? It's easily solved but I need to see your code to decide the best way to do it.

    This document proves the idea: 
    
<html>
<body onload='RecoverScroll.init()'>
<script src='recoverscroll.js'></script>
<br>-
<br>+
<br>/
<br>-
<br>+
<br>/
<br>-
<br>+
<br>/
<br>-
<br>+
<br>/
<br>-
<br>+
<br>/
<br>-
<br>+
<br>/
<br>-
<br>+
<br>/
<br>-
<br>+
<br>/
<br>-
<br>+
<br>/
<br>-
<br>+
<br>/
<br>-
<br>+
<br>/
<br>-
<br>+
<br>/
<br>-
<br>+
<br>/
<br>-
<br>+
<br>/
<br>-
<br>+
<br>/
<br>-
<br>+
<br>/
<br>-
<br>+
<br>/
<form action="">
 <input type="text"  value="text">
 <input type='submit' onclick="RecoverScroll.record()">
</form>
<br>-
<br>+
<br>/
<br>-
<br>+
<br>/
</body>	
</html>
    Code (markup):
     
    Logic Ali, Jun 18, 2008 IP
  12. redrum

    redrum Peon

    Messages:
    18
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #12
    I do use another onload event. But to getting it into the basics i followed your example and created two html-files:

    scrollrecover1.html
    <html>
<body>
  <script type='text/javascript'>
   window.onload=function(){RecoverScroll.init('s')}
  </script>  

<script src='recoverscroll.js'></script>
01
<br>-
<br>+
<br>/
<br>-
<br>+
<br>/
<br>-
<br>+
<br>
<a href="scrollrecover1.html">01</a> <a href="scrollrecover2.html">02</a>
<br>/
<br>-
<br>+
<br>/
<br>-
<br>+
<br>/
<br>-
<br>+
<br>/
<br>-
<br>+
<br>/
<br>-
<br>+
<br>/
<br>-
<br>+
<br>/
<br>-
<br>+
<br>/
<br>-
<br>+
<br>/
<br>-
<br>+
<br>/
<br>-
<br>+
<br>/
<br>-
<br>+
<br>/
<br>-
<br>+
<br>/
<br>-
<br>+
<br>/
<br>-
<br>+
<br>/
<form action="">
 <input type="text"  value="text">
 <input type='submit' onclick="RecoverScroll.record()">
</form>
<br>-
<br>+
<br>/
<br>-
<br>+
<br>/
</body>	
</html>
    Code (markup):
    and scrollrecover2.html
    <html>
<body>
  <script type='text/javascript'>
   window.onload=function(){RecoverScroll.init('ss')}
  </script>  
<script src='recoverscroll.js'></script>
02
<br>-
<br>+
<br>/
<br>-
<br>+
<br>/
<br>-
<br>+
<br>
<a href="scrollrecover1.html">01</a> <a href="scrollrecover2.html">02</a>
<br>/
<br>-
<br>+
<br>/
<br>-
<br>+
<br>/
<br>-
<br>+
<br>/
<br>-
<br>+
<br>/
<br>-
<br>+
<br>/
<br>-
<br>+
<br>/
<br>-
<br>+
<br>/
<br>-
<br>+
<br>/
<br>-
<br>+
<br>/
<br>-
<br>+
<br>/
<br>-
<br>+
<br>/
<br>-
<br>+
<br>/
<br>-
<br>+
<br>/
<br>-
<br>+
<br>/
<form action="">
 <input type="text"  value="text">
 <input type='submit' onclick="RecoverScroll.record()">
</form>
<br>-
<br>+
<br>/
<br>-
<br>+
<br>/
</body>	
</html>
    Code (markup):
    When you browse between scrollrecover1.html and scrollrecover2.html by clicking the 01 and 02 link you start at the top of the page, even if you have scrolled down a bit. That's what I want.

    If you submit the form on scrollrecover1.html the scroll position is rememberd and you remain on the same position. And if you go to scrollrecover2.html the page will start at the top. But heres the problem in this case; if you return to scrollrecover1.html you will be scrolled to the position you were at when you submited the form.
    Would it be possible to return to the top when you go back to scrollrecover1.html?
     
    redrum, Jun 18, 2008 IP
  13. Logic Ali

    Logic Ali Well-Known Member

    Messages:
    170
    Likes Received:
    5
    Best Answers:
    0
    Trophy Points:
    108
    #13
    If you append # to the href of the link, the script will not act.
     
    Logic Ali, Jun 18, 2008 IP