12

In the footer of my page there a few links that point to different sections on the same page using anchor tags (# appended to the URL of the page).

This works fine, just the browser back button does not work: I cannot move back to the previous page from where I had navigated to the anchored page.

The simple question here is, is it possible to move back to previous page after navigating in the anchored page a few times? If it is then please could you suggest how?

Anchored page: the page that has several sections marked by the id attribute that can be pointed to by a URL with #anchorId at the end.

Improve this question
5
  • 2
    This is how it is supposed to work, and does in all browsers by default. Users know and expect this behavior, so why mess with that? Commented Nov 20, 2014 at 19:15
  • 1
    Sounds good. Expected that to be default behaviour.It was raised as a defect in my project by QA.Can you please give a reference to any standard document available over internet that supports this default behaviour. Commented Nov 20, 2014 at 19:20
  • "It was raised as a defect in my project by QA". Oh wow. Commented Nov 20, 2014 at 19:22
  • @sebnukem sounds funny..but that's truth Commented Nov 20, 2014 at 19:28
  • I found a site that does what you're looking for. Credit goes to him, not me. Refer to the edited answer below. Commented Nov 20, 2014 at 20:06

5 Answers 5

Reset to default
5

I also faced the same problem see my question anchor links referring to the page sections not working on browser refresh, back and forward

But I had to do it the way normal links work so what I did was I manually go to that section by getting the element from the hash.

$(window).on('hashchange', function () { var top = $(window.location.hash).offset().top; $(window).scrollTop(top); });

This works for forward and back buttons. And for refresh also you need to do the same thing. Get the element from the hash and scroll to that element manually.

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

1

History and the Back Button.

In days of old, the back button did little more that go to the previous item in the browser's history. That's changed quite a bit since then, as it keeps its own history according to a somewhat simple set of rules. Good luck digging through standards docs to find it though.

UI/UX and why NOT to change expected behaviors.

Please reference w3c's 'don't brek the back-button before you go making changes to a browser's default behavior. Its like that for a reason, following mountains of debate and defining standards.

Ultimately, this is what browsers do, and so this is what the users expect. If you begin to subvert the behavior away from user's expectations, you're likely to start pissing off your users. When buttons and links repeatedly don't behave as expected, users will often just give up and leave your site.

Prevent Default.

If you really must alter the default behavior, the using javascript would be the best way to do it:

<a href="#id" onclick="return gotoAnchor(this);"> <script> function gotoAnchor(elm) { window.event.returnValue = false; var url = location.href; location.href = elm.href; history.replaceState(null,null,url); return false; } </script>
Improve this answer

4 Comments

if you begin to subvert the behavior away from user's expectations, you're likely to start pissing off your users. See, that's the thing, I've yet to encounter a single user who doesn't expect the back button to take them to a previous anchor tag, as that's in the browsers history. It's inconsistent behavior that doesn't fit in with the majority of users day-to-day experiance
@DouglasGaskell, OP didn't give us enough information to understand the UX. Depending on what is actually happening, it might be a good idea to change the behavior. However, anchors should not be used to hide/show content, instead just focusing the scroll. The real question is, "what kind of action belongs in history?" New content: Yes. Scroll: No. An anchor is just a scroll (unless you're misusing it)
Fair enough. When I made that comment I was dealing with a very large SPA glossary of sorts with interlinking definitions and items. One of the requests was that users can follow anchor links to other definitions, and go back via the browser back button.
@Douglas Gaskell I agree. When I click something and the screen changes and then click the back-button, I would expect the display to change back to what it was before. IF somebody truly expects that NOTHING should happen when they click back-button in this situation, they would not click it. And thus they would have no problem either.
0

http://www.the-art-of-web.com/javascript/remove-anchor-links/

Visit that site. Scroll to the bottom and use test the anchors. It's doing what you want.

"The following code will parse your HTML page and override the function of any links that target anchor points on the same page. The link function will be replaced with a call to the scrollIntoView method of the target element:

document.addEventListener("DOMContentLoaded", function() { var links = document.getElementsByTagName("A"); for(var i=0; i < links.length; i++) { if(!links[i].hash) continue; if(links[i].origin + links[i].pathname != self.location.href) continue; (function(anchorPoint) { links[i].addEventListener("click", function(e) { anchorPoint.scrollIntoView(true); e.preventDefault(); }, false); })(document.getElementById(links[i].hash.replace(/#/, ""))); } }, false);
Improve this answer

3 Comments

That will prevent the browser from jumping to that section of the page in the first place … if you cancel the event, you have to “re-implement” jumping to that part of the page yourself, f.e. by using scrollIntoView method.
The above code was written to make anchor link that points to other section than top of the page to work.As on clicking the link it used to take to top of the page always ..however it would take to the designated section on clicking again
it would work for movements in the same page..but I doubt it would work for link pointing to another page section.
0 
if (document.referrer == "") { window.open("index.php"); } else { window.history.go(-1); return false; }
Improve this answer

1 Comment

Hi, can you please add a quick explanation of the code snippet?
0

Without jQuery and without having to modify every anchor elements:

<script> // Makes sure we jump to anchor on reload document.addEventListener("DOMContentLoaded", function (event) { var ele = document.getElementById(window.location.hash.substring(1)); ele.scrollIntoView(); }); // Makes sure we jump to anchor when doing back and forward window.addEventListener('hashchange', () => { var ele = document.getElementById(window.location.hash.substring(1)); ele.scrollIntoView(); }, false); </script>
Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.