Anchor <A> Tags Not Working in Chrome When Using #

Anchor a tags not working in chrome when using #

Turns out this was a bug in certain versions of chrome, posting workaround for anyone who needs it! :)

$(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;
            }, 300);
        }
    });

Anchor Tags not working in Chrome

Found a solution I had to add this:

$(window).load(function(){
    var hashNum = 0;
    if (window.location.hash != ''){
        hashNum = window.location.hash.replace("#m", "");   
        console.log('hashNum: ' + hashNum); 
    };

    hashMenu = $("#m"+hashNum-1).offset().top;

      $('html,body').animate({
          scrollTop: hashMenu
    }, 1000);

    });

Anchor Tag in chrome not working properly?Is this a chrome Bug?

I think its a Chrome bug. So After some searching i found this solution.

jQuery(window).load(function(){
    var hashNum = 0;
    if (window.location.hash != ''){
        hashNum = window.location.hash.replace("#illegal", "");   
        console.log('hashNum: ' + hashNum); 
    };
    hashMenu = jQuery("#illegal").offset().top;
      jQuery('html,body').animate({
          scrollTop: hashMenu
    }, 1000);

});

javascript-generated anchor tags are not visible when jumping to anchor tags on the same page

Scrolling to target anchors (or any #target) will be limited to the content on the page. If you are trying to scroll to the bottom of a page, the browser can only scroll so far (i.e. the bottom of the page can't scroll to the top of the window unless the window's height is very small). It's entirely possible that it is working just fine, but your scroll position just isn't reachable.

Taking that off the table, use id instead of name (as @DavidThomas described in the comments) for best compatibility.

Lastly, because you can now use id, your targets no longer have to be limited to hyperlinks. Rather than creating empty anchor elements that you can link to, which just clutters up the DOM, pick an existing element in the DOM and use that.

Barring those issues, the following code creates an id on the first paragraph of the document that the hard-coded link at the bottom can scroll to.

As an example though, note that I have also hard-coded a "go to bottom" link at the top and when you click it, you won't see the bottom scroll all the way to the top.

If you create the new element using document.createElement() and set up the element's properties using setAttribute, there should be no problem.

var thePs = document.querySelectorAll("p");
// Update the first paragraph to have the id that will serve as the target:thePs[0].setAttribute("id", "top");

p:last-of-type{  background:yellow;}

<p><a href="#bottom">Go to bottom</a>This is a test. This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.</p>
<p>This is a test. This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.</p>
<p>This is a test. This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.</p>
<p>This is a test. This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.</p>
<p>This is a test. This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.</p>
<p>This is a test. This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.</p>
<p>This is a test. This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.</p>
<p>This is a test. This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.</p>
<p><a href="#top">Back to Top</a></p><p id="bottom">This is the bottom. I'll never be scrollable to the top of the browser window unless the window's height is very small.</p>

---

Related Topics