Adding anchor tag in html and potential javascript interfering issue

Question

I have two html pages, in which on first page I have a link that points to an anchor tag to the second page.

Here is the first page. At the bottom of the page there are some links. If user clicks on for example Analog Electronics link s/he will go to the second page that has the anchor tag.

Here is the link on the first page:

<a href="/electronics.html#electronics-books-suggested-by-hooman-darabi">Electronics</a>

and here is the anchor tag on the second page:

<h3 id="electronics-books-suggested-by-hooman-darabi">Electronics books suggested by Hooman Darabi</h3>

At first the anchoring was not working on Chrome, but working on Firefox. After some Google search I came up with some clues:

In the bottom of my html file I have three JavaScript files included:

If I comment out any of these 3, the anchoring works fine on both Chrome and FireFox. But of course I need these 3 JS files to be included on my page.

After more research I found this suggestion:

To get the anchoring to work and when the link is clicked the top of the presented second page to be at the anchor tag position I had to add this code to the html page:

$(document).ready(function () {
            var isChrome = /Chrome/.test(navigator.userAgent) && /Google Inc/.test(navigator.vendor);
            if (window.location.hash && isChrome) {
                setTimeout(function () {
                    var hash = window.location.hash;
                    window.location.hash = "";
                    window.location.hash = hash;
                }, 200);
            }
        });

I don't know what this code does, but it helps the anchored to be shown at the top of the presented linked page.

Although this code solves my issue, but now something bad happens!. If on the second page (http://www.doradolist.com/analog.html#analog-electronics-books-suggested-by-hooman-darabi) I click on the Chrome back bottom I don't go back to previous page. I need to press the back bottom 3 times to go back to previous page. If I look at what happens to the URL after each back bottom press I see this in the URL of the page:

Original URL:

http://www.doradolist.com/analog.html#analog-electronics-books-suggested-by-hooman-darabi

After one back bottom click:

http://www.doradolist.com/analog.html#

After two back bottom clicks:

http://www.doradolist.com/analog.html#analog-electronics-books-suggested-by-hooman-darabi

and finally after 3 back bottom clicks I go to the original page.

Any help on why this back bottom issue happens and how to resolve it would be greatly appreciated. Or if instead of adding the code that I have shown above there is another way to resolve the anchoring issue in Chrome that would be even better because the back bottom issue is the result of that code.

Jake · Accepted Answer · 2019-07-13 07:25:23Z

1

To answer your question of why this is happening, I'll explain what that snippet of code is doing.

Once you land on the second page (the first URL in history), this snippet waits for the document to be loaded ($(document).ready), then executes the callback passed to it, which checks if the browser is Chrome, if it is then it adds a callback onto the message bus (setTimeout), which grabs the hash from the URL, it removes the hash from the URL (the second URL in history), then adds it back to the URL (the third URL in history, and the one which ultimately 'scrolls' to that ID).

I've annotated your code with comments.

$(document).ready(function () { // wait for document to load
            var isChrome = /Chrome/.test(navigator.userAgent) && /Google Inc/.test(navigator.vendor); // check if browser is Chrome
            if (window.location.hash && isChrome) { // if the URL has a hash in it, and the browser is Chrome
                setTimeout(function () { // add this callback to the message bus
                    var hash = window.location.hash; // read the hash from the URL in the address bar
                    window.location.hash = ""; // set the hash in the URL in the address bar to be empty
                    window.location.hash = hash; // add the hash back to the URL in the address bar
                }, 200);
            }
        });

answered Jul 13, 2019 at 7:25

Jake

1871 silver badge5 bronze badges

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

4 Comments

TJ1 Over a year ago

Thanks Jake, that is a nice explanation. Now how can I resolve this? It is very annoying to click back button 3 times to go back.

TJ1 Over a year ago

Also as you are expert in JavaScript, can you explain why if I comment out any of the 3 JS codes included in the html file the anchoring issue goes away? Is there a way to resolve it by adding a delay somewhere?

Jake Over a year ago

It appears that what is happening is that one of the other three scripts you include removes the fragment (hash) from the URL. I briefly looked at the sources of those scripts, and it looks like main.js has some stuff in which removes/changes the window.location.hash. I'm on my phone now, but I'll take a proper look later, if nobody else has answered before then.

TJ1 Over a year ago

I appreciate it if you can help on this.

Collectives™ on Stack Overflow

Adding anchor tag in html and potential javascript interfering issue

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related