CODEWITHSUNDEEP
javascripthtmlgoogle-chromeanchor
TJ1
TJ1

Reputation: 8468

Adding anchor tag in html and potential javascript interfering issue

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.

Upvotes: 0

Views: 119

Answers (1)

Jake
Jake

Reputation: 187

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);
            }
        });

Upvotes: 1

Related Questions