Для создания генерации якорей в вики, мы можем использовать язык программирования JavaScript в сочетании с HTML и CSS.
Сначала нам нужно добавить якори в нашей HTML-разметке. Для этого мы добавим элементы <a>
, которые будут содержать идентификаторы якорей и текст, на который мы будем ссылаться.
<h2><a id="section1">Раздел 1</a></h2> <p>Содержимое раздела 1...</p> <h2><a id="section2">Раздел 2</a></h2> <p>Содержимое раздела 2...</p> <h2><a id="section3">Раздел 3</a></h2> <p>Содержимое раздела 3...</p>
Теперь, чтобы создать ссылки на якори, мы можем использовать элементы <a>
с атрибутом href
, содержащим идентификаторы якорей.
<a href="#section1">Перейти к разделу 1</a> <a href="#section2">Перейти к разделу 2</a> <a href="#section3">Перейти к разделу 3</a>
Теперь, когда мы нажимаем на эти ссылки, страница автоматически прокручивается до соответствующего якоря.
Однако для более плавной прокрутки страницы к якорю, мы можем использовать JavaScript. Для этого мы создадим обработчик события клика для каждой ссылки и используем метод scrollIntoView()
для плавной прокрутки до якоря.
document.querySelectorAll('a[href^="#"]').forEach(anchor => { anchor.addEventListener('click', function (e) { e.preventDefault(); document.querySelector(this.getAttribute('href')).scrollIntoView({ behavior: 'smooth' }); }); });
Этот код выбирает все ссылки, которые начинаются с символа #
, добавляет обработчик события клика и плавно скроллит страницу к соответствующему якорю.
Чтобы добавить этот код на страницу вики, мы можем использовать тег <script>
.
<script> // Вставьте код JavaScript сюда </script>
Это позволит нам сгенерировать якори и создать ссылки, которые будут плавно скроллить страницу к разделам вики, когда на них будет выполнен клик.