views:

2158

answers:

5

I'm trying to make it so when a user scrolls down a page, click a link, do whatever it is they need to do, and then come back to the pages w/ links, they are at the same (x-y) location in the browser they were before. How do I do that?

I'm a DOM Newbie so I don't know too much about how to do this.

Target Browsers: IE6/7/8, Firefox 2/3, Opera, Safari

Added: I'm using a program called JQuery to help me learn

A: 

you can use offsetLeft and offsetTop

YonahW
A: 

Try this or this.

Lucas Oman
A: 

As far as I recall, the code for getting the viewport position differs between browsers, so it would be easier to use some kind of framework, for example, Prototype has a function document.viewport.getScrollOffsets (which, I believe, is the one you're after).

However, getting the coordinates is only one part, the other would be doing something with them later. In this case you could add event listener to window.unload event, when that one fires, save the location in a cookie and later, when the user opens the page again, check whether that cookie is present and scroll accordingly.

Though if all you care about is getting the user back to the place he was when he comes to the page via the browser's Back button, don't most browsers already do that automatically?

Nouveau
A: 

Usually, the browser will preserve the page viewport if you navigate away and then back (try it with any pages on your favorite news site). The only exception to this is probably if you adjust your cache settings to re-download and re-render the page each time.

Not doing that (that is, not setting your page to never be cached) is probably the easiest, least obtrusive way to solve your problem.

levik
+1  A: 

To get the x-y location of where a user clicked on a page, use the following jQuery code:

<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
jQuery(document).ready(function(){
   $("#special").click(function(e){
      $('#status2').html(e.pageX +', '+ e.pageY);
   }); 
})
</script>
<body>

<h2 id="status2">
0, 0
</h2>
<div style="width: 100px; height: 100px; background:#ccc;" id="special">
Click me anywhere!
</div>
</body>
</html>
deepwell