Хэш в привязных тегах

Как загрузить страницу и открыть ее в определенном месте загруженной страницы?

Например, допустим, что у меня есть page1.html, у которого есть 3 ссылки

<a href="page2.html#1">1</a>
<a href="page2.html#2">2</a>
<a href="page2.html#3">3</a>

on page2.html, у меня есть и те ссылки на странице, т.е.

<a href="page3.html#1">1</a>
<a href="page3.html#2">2</a>
<a href="page3.html#3">3</a>

но когда я нажимаю ссылку #2 или #3 из page1.html, они всегда открываются в верхней части страницы, даже если #2 и #3 отключены от экрана page2.html, который необходимо прокрутить вниз, чтобы их можно было увидеть.

Не уверен, что я делаю неправильно.

Ответ 1

Вам нужно поставить именованные якоря на page2.html, например:

<a name="1"></a>
…
<a name="2"></a>
…
<a name="3"></a>

- Это было до HTML5. В настоящее время вы используете id вместо name.

Ответ 2

Вам нужно добавить идентификатор элемента, который должен "прыгать".

Например, если у вас есть

<div id="part1">
  <p>Blah blah blah</p>
</div>

<div id="part2">
  <p>Blah blah blah</p>
</div>

<div id="part3">
  <p>Blah blah blah</p>
</div>

И все они находятся в page.html

Затем вы можете ссылаться на page.html#part1, page.html#part2 и т.д. и т.д., и он перейдет к правильной части страницы

Update:

Вы также можете использовать атрибут name, но я предпочитаю использовать id. Это связано с тем, что все может иметь идентификатор, но не обязательно имя. Например, я не думаю, что имя является допустимым атрибутом для тега 'a' в HTML 5. Также, если у вас есть один элемент с id = "part1" и другой другой элемент с name= "part1", тот, который имеет id будет принимать предварительную оценку. Чтобы избежать путаницы, я просто придерживаюсь одного метода. Здесь немного больше обсуждается этот здесь

Ответ 3

Использование атрибута имени или атрибута id в теге привязки на странице target приведет к желаемому результату.

<a name="someLocation" id="someLocation">SomeText</a>

В качестве соглашения XHTML 1.1 атрибут name тега привязки заменен атрибутом id. В контексте XHTML 1.0 атрибут name считается устаревшим.

См. этот ответ для соответствующего обсуждения изменений тега привязки.

Подводя итог: по соображениям совместимости многие предлагают использовать как атрибут id, так и атрибут name внутри одного и того же элемента. В этом случае тег привязки.

Стандарт W3C рекомендует (применительно ко всем применимым элементам):

Идентификаторы id и name имеют одно и то же пространство имен. Это означает, что они не могут оба определить якорь с тем же именем в том же документе. Допустимо использовать оба атрибута для указания уникального идентификатора элемента для следующих элементов: A, APPLET, FORM, FRAME, IFRAME, IMG и MAP. Когда оба атрибута используются в одном элементе, их значения должны быть идентичными.

Извините за любое дублирование, мне не хватает репутации, чтобы прокомментировать лучший ответ.

Ответ 4

Поскольку эти сообщения все еще найдены, я хотел бы добавить обновление:

<a href="#jumppoint">goto '#jumppoint'</a>

прыгает в:

<div id="jumppoint">  <!-- name="" does not work here on modern browsers -->
   <h2>here</h2>
</div>

и:

<a name="jumppoint" />
<h2>here</h2>

Ответ 5

Обозначьте свои якоря или поместите ссылки на свои элементы:

www.yoursite/index.html # содержание Прокрутит вас до <div id="content">, если он существует, или <div name="content">.

Ответ 6

вы должны назначить имена разделов или ids 1, 2 и 3 разделам, то это сработает для вас.