Return to original place on a web page.

[Steveinid]

I have a web page where users can scroll down to see the content. Along the length of the page are links to another page. When the user clicks a link and gets to the next page they are presented a link to 'return to the previous page'. If they click that link it takes them back to the original page just fine but it returns them to the top of the page. I would like them to return to the same spot they were at when they exited the original page. When you use the 'back' button on the browser it does this. I don't know what the term is for it so I don't even know where to start looking for a way to do it. Any help would be appreciated.

 

Thanks

Steve

[kicken]

Use JavaScript to make the link work as a back button instead of a normal link back to the page.  You can leave your link as it is now so users that have JS disabled will still go back, just not to the same position.

HTML:

<a href="previous.html" class="return-link">Return</a>

Script:

//Using jQuery
$('.return-link').click(function(e){
  e.preventDefault();
  history.back();
});

 

[Steveinid]

Thanks... I'll give it a try.

[ginerjm]

Haven't used it in awhile but there is a use of the html <a> tag to do just what you want.  Create anchors in the page where you want to come back to and then use the same name value in your call back to the page.  Read up on it.

[ginerjm]

<a href="#section2">Go to Section 2</a>
 

and

<h2 id="section2">Section 2</h2>

When you click on the anchor tag it will send you to the place where there is something with an id matching the href value.  You can create an anchor that directs you to another page also, just append the #xxx to your url as in:

<a href="mywebpage.com#section2">Go to new page</a>

[Zane]

Actually, it's the name attribute to define an area of the page scroll-wise.

<a name="middle-of-page">

Then you can have your link with the name in it

<a href="#middle-of-page">Click to go to middle of page</a>

For external usage, just put the page url.

<a href="page2.html#middle-of-page">Click to go to middle of Page 2</a>

 

[Barand]

@Zane I am pretty sure that these days #go-to-here at the end of the URL will send the user to the element on the page with id='go-to-here'

[Zane]

@Barand I suppose you're right

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#attributes

Ironically, that page didn't scroll to Attributes section when I clicked the link.

Using that site as an example, it looks like the id can be on hN elements