Урок 16. Внутристраничные ссылки (якоря)

Если на Вашей странице очень много материала и Вы опасаетесь, что посетитель сайта может в нём запутаться, можно сделать внутристраничные ссылки или, как их иногда называют, "якоря". Иными словами - действующее оглавление на странице. Пример такой страницы можно увидеть здесь:

Панаева. Воспоминания

К примеру, нажав на ссылку "Глава третья", браузер переметит Вас на то место на странице, где начинается третья глава.
Сделать такое оглавление очень просто.

В "содержании" мы ставим вот такую ссылку: <a href="#kuk"><H3> Глава третья </H3> </a>
а в тексте, где начинается третья глава, прописываем такой "якорь":
<a name="kuk"> <H2> Глава третья </H2> </a>

Заголовки H3 и H2 взяты произвольно. Можно их сделать одинаковыми, или такими, какими хотите. Самое главное тут - атрибут name, который указывает браузеру, в какое место страницы ему следует отправиться. Значение у нашего name прописано "kuk". Здесь можно написать любое слово. Главное, чтобы оно было написано латиницей и полностью совпадало со словом, прописанном в адресе ссылки, в содержании. В данном случае, я взяла три первые буквы фамилии "Кукольник", о котором рассказывает данная глава воспоминаний Панаевой.

Если Вы хотите сделать оглавление на другой странице, в ссылке оглавления следует прописать полный адрес, например:
<a href="http://dugward.ru/library/zolot/panaeva_vosp.html#kuk"> <H3> Глава третья </H3> </a>

name на странице с текстом остаётся то же самое.

Можно в конце каждой главы поставить ссылку "Вернуться к содержанию". Вдруг пользователю покажется слишком нудным крутить обратно колесо прокрутки, чтобы вернуться на содержание (Я лично в таких случаях нажимаю на браузере стрелочку "назад").
Мы можем сделать ссылку "Вернуться к содержанию". Это будет выглядеть так:
под третьей главой мы пишем:
<a href="#soderganije"> <H3> Вернуться к содержанию </H3> </a>

А в начале самого содержания мы прописываем:
<a name="soderganije"> <H2>СОДЕРЖАНИЕ</H2> </a>

Наверх