Anchor Links & Back Button Issue

HTML & CSS
1

Hi all

I am working on a page with an unordered list with anchor links.

When the user clicks on a link in the list it will jump to the required part of the page, which is what I want.

However, a user has reported a usability issue - when they click the link and it goes to the anchor point, upon pressing the back button in the broswer and returning to the list, the links no longer work!!

Any ideas why this is the case?

Here is a very shortened version of my code:



                    <ul class="v2">
                         <li class="careers_bullets"><a href="#job_title" class="careers">Job Title</a></li>
                     </ul>
                       
                       

                       <hr>  
                       
                       
                         <h3><span class="jobrole"><a name="job_title">Job Title</a></span></h3>

                            <p><strong>Brief Description of the role: </strong> </p>      
                                   
                            <p>......</p>                        
                                                        
                            <p>
                           <a href=".pdf" class="button_text"><button class="btn btn-normal btn-color bottom-pad">Further Details</button></a> &nbsp;
                           
                           <a href="mailto:xxxxsubject=Job Application" class="button_text"><button class="btn btn-normal btn-color bottom-pad"> Apply For Role</button></a></p>
                              
                   <hr> 


             (the rest of the jobs follow under here, )

I am a bit stumped!

2

Have you got a link to the page? It can be easier to debug these kinds of problems when we can see them in situ.

3

Your code seems clean and well written.

I suppose you know that there are a series of problems with some browsers’ back buttons –especially in the case of Internet Explorer – due to ads and intermediate pages and add-ons in the back queue. When not because of malware/spyware issues in the users’ computers.

Anyway, and echoing StevieD, a link to the site would be helpful.

4

However, a user has reported a usability issue - when they click the link and it goes to the anchor point, upon pressing the back button in the broswer and returning to the list, the links no longer work!!

Might depend on their browser, but here’s a way that should work for all browsers (except all Blink browsers, where it’ll work visually but won’t bring the keyboard focus down there, due to a very longstanding bug they should have fixed before they forked from Webkit):


<ul class="v2">
                         <li class="careers_bullets"><a href="#job_title" class="careers">Job Title</a></li>
                     </ul>
                       
                       

                       <hr>  
                       
                       
                         <h3 [b]id="job_title"[/b]><span class="jobrole">Job Title</span></h3>

                            <p><strong>Brief Description of the role: </strong> </p>

If you want to spice things up with the :target attribute (might not work in ancient IE), check out http://www.scooterverzekeren.com/content/vragen

The URL behaviour on that page is what you should get on really all browsers (okay, not sure about mobile but, should work).

Of course my answer is assuming that the problem the user has is with the anchor with the name attribute. As the others say, a test site we can visit would help, as well as what browser the user was using, because maybe the problem is something else entirely.