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

For a webpage where the anchor tags are inserted into the HTML server-side, I can jump to each anchor tag by either manually changing the hash tag at the end of the URL in the address bar or by having clickable links on the same page (<a href="#mytag">gotomytag</a>) that take me to my local anchors without reloading the page.

I have noticed that this won't work if the anchor tags on the page are generated using JavaScript. Unless I'm doing something wrong, I'm about to conclude that JavaScript generated hash-tags aren't visible to navigation by anchor tags included in the URL.

To make things more clear, here's the sequence that doesn't work:

Navigate to mysite.com/mypage.php
JavaScript right before </body> tag adds my anchor tag (<a name="here"></a>)
I change the URL in the address bar to "mysite.com/mypage.php#here"
I expect the browser to navigate to the tag. But it doesn't. Nothing happens as if the tag doesn't exist. If I include the anchor tag added in step 2 on the server side, then this step navigates to the anchor as expected.

Also, I am using the following snippet to create the element which I have confirmed works correctly using the builtin chrome debugger:

`var ael = document.createElement('a');
ael.setAttribute('name','here');
someelementinmyhtmldom.appendChild(ael);`

I Hope someone here can set me straight or confirm my finding and suggest a work-around.

I'm on Chrome Version 55.0.2883.87 on Windows 7.

Thanks.

EDIT: Reason for my initial code not working: The answer to my question is given in the post below, but if you're interested in why my code wasn't working: I learned that you cannot navigate to an anchor tag that is hidden by other elements! I was placing my anchor element about 50px above where it should have been (using absolute placement) in order to compensate for the sticky menu bar up top and that made my anchor disappear because of overflow:hidden property of its containing element. The solution: make sure you anchor is not covered up either by other elements or because of moving outside of an element whos's overflow is hidden.

Solution

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>