Созданные javascript метки привязки не видны при переходе на привязку тегов на той же странице

Question

Для веб-страницы, на которой привязанные теги вставляются в HTML-сервер, я могу перейти к каждому тегу привязки, вручную изменив хэш-тег в конце URL-адреса в адресной строке или с помощью интерактивных ссылок на одной странице (<a href="#mytag">gotomytag</a>), которые приведут меня к моим местным якорям без перезагрузки страницы.

Я заметил, что это не сработает, если метки привязки на странице создаются с использованием JavaScript. Если я не сделаю что-то не так, я собираюсь сделать вывод о том, что JavaScript-хэш-теги не отображаются для навигации с помощью привязанных тегов, включенных в URL-адрес.

Чтобы сделать вещи более ясно, вот последовательность, которая не работает:

1. Перейдите mysite.com/mypage.php

2. JavaScript перед </body> тег добавляет мой тега привязки (<a name="here"></a>)

3. изменить URL в адресной строке на "mysite.com/mypage.php#here"

4. Я ожидаю, что браузер перейдет к тегу. Но это не так. Ничего не происходит, если тег не существует. Если я добавлю тег привязки, добавленный на шаге 2 на стороне сервера, то этот шаг будет переходить к якорю, как ожидалось.

Кроме того, я использую следующий фрагмент кода, чтобы создать элемент, который я подтвердил корректность работы с помощью встроенного хром отладчик:

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

Я надеюсь, что кто-то здесь можно задать мне прямо или подтвердить свой вывод и предложите обход.

Я на Chrome версии 55.0.2883.87 на Windows 7.

Спасибо.

EDIT: Причина моего первоначального кода не работает: Ответ на мой вопрос приведен в сообщении ниже, но если вас интересует, почему мой код не работал: я узнал, что вы не можете перейти к тег привязки, который скрыт другими элементами! Я помещал свой якорный элемент примерно на 50 пикселей выше, где он должен был (используя абсолютное размещение), чтобы компенсировать липкую панель меню вверх, и это заставило мой якорь исчезнуть из-за переполнения: скрытого свойства его содержащего элемента. Решение: убедитесь, что якорь не закрыт другими элементами или из-за перемещения за пределы элемента, переполнение которого скрыто.

Answer 1

Прокрутка к целевым якорям (или любому #target) будет ограничена содержанием на странице. Если вы пытаетесь прокручивать нижнюю часть страницы, браузер может прокручивать до сих пор (т. Е. Нижняя часть страницы не может прокручиваться до верхней части окна, если высота окна не очень мала). Вполне возможно, что он работает отлично, но ваша позиция прокрутки просто недоступна.

Принимая это за стол, используйте id вместо name (как описано в комментариях @DavidThomas) для лучшей совместимости.

Наконец, поскольку теперь вы можете использовать id, ваши цели больше не должны ограничиваться гиперссылками.Вместо создания пустых элементов привязки, к которым вы можете подключиться, которые просто загромождают DOM, выберите существующий элемент в DOM и используйте это.

Запрет на устранение этих проблем, следующий код создает в первом абзаце документа id, по которому может прокручиваться жестко закодированная ссылка внизу.

В качестве примера, однако, обратите внимание, что у меня также есть жестко закодированная ссылка «go to bottom» вверху, и когда вы нажимаете на нее, вы не увидите нисходящую прокрутку до самого верха.

Если вы создаете новый элемент с помощью document.createElement() и настроите свойства элемента с помощью setAttribute, проблем не возникнет.

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>