Используйте HTML-привязку, чтобы отобразить скрытый элемент div и прокрутите до нужного местоположения привязки. - PullRequest
Новая
       18

Используйте HTML-привязку, чтобы отобразить скрытый элемент div и прокрутите до нужного местоположения привязки.

0 голосов
/ 17 мая 2019

Я пытаюсь создать индексную страницу и хотел бы иметь ссылки на якоря, которые будут в скрытом div.

Нажатие на ссылку привязки приведет к тому, что div, в котором находится привязка, станет видимым и прокрутит страницу до местоположения привязки.

Я пробовал несколько вещей, но потерпел неудачу. Любая помощь будет принята с благодарностью. 

<div>
  <p>Link</p>
  <a href="#content1">Content 1</a><a href="#content2">Content 2</a><a href="#content3">Content 3</a><a href="#content4">Content 4</a>
</div>
<div class="inter">Some intermedary content with a large bottom margin to demonstrate scroll</div>
<div>
  <div class="hiddenContent">
    <div id="content1">I am content 1</div>
    <div id="content2">I am content 2</div>
    <div id="content3">I am content 3 
    <a id="content4" >Inner anchor within content 3 div. Link should scroll here but also show the other content within content 3.</a>
    </div>
  </div>

1 Ответ

0 голосов
/ 17 мая 2019

Это можно легко решить с помощью CSS.Вам нужно будет настроить его в соответствии с вашими потребностями, поскольку вы не дали нам никакого кода для работы.

Используйте селектор :target pesuo-class, чтобы выбрать элемент, который является целью ссылки 

.hiddenContent>div, .hiddenContent > [name=content4] {
  display: none;
}

.hiddenContent>div:target {
  display: block;
}

.inter {
  margin-bottom: 100vh;
}
<div>
  <p>Link</p>
  <a href="#content1">Content 1</a><a href="#content2">Content 2</a><a href="#content3">Content 3</a><a href="#content4">Content 4</a>
</div>
<div class="inter">Some intermedary content with a large bottom margin to demonstrate scroll</div>
<div>
  <div class="hiddenContent">
    <div id="content1">I am content 1</div>
    <div id="content2">I am content 2</div>
    <div id="content3">I am content 3</div>
    <a name="content4" >
        <div>Some content in a named anchor</div>
    </a>
  </div>
...