Якоря в ссылках
Всем привет! С Вами Дмитрий Лаврик, и в этом уроке мы рассмотрим такую важную и интересную тему, как якоря в ссылках. Для начала давайте покажу, о чем идет речь.
Зайдем на такой общеизвестный сайт, как Википедия. Здесь якоря используются практически в каждой статье. Пролистайте страницу – видите, здесь есть какие-то тексты, какие-то заголовки, а нам с вами, допустим, хочется сразу перейти к какому-то конкретному разделу. Для этого на сайте Википедия сделано меню. Меню это не обычное, потому что оно перекидывает нас не на другие страницы, а на конкретную тему в рамках текущей страницы. Например, нажмем на заголовок «Браузерные войны» – адрес страницы остался, а по полосе скролла видно, что страница просто перешла вниз. То есть, якоря – это переход не между страницами, а в определенное место страницы с точки зрения скролла (полосы прокрутки этой страницы).
Давайте попробуем сами сделать что-нибудь подобное.
На видео представлена одна из статей в блоге Школы Современных Технологий для новичков – «Как работает Веб?» (кому интересно, потом и почитать можете, но сейчас нас интересует другое). Здесь есть несколько разделов: «Клиенты и сервера», «HTML и CSS», «PHP-слоник – мозг сайта», «Java Script – красота в движении». Когда статья такого размера, навигацию делать не обязательно, но можно представить, что контента там раз в десять больше, и наша задача сделать так, чтобы после вступительной части у нас стояло такое же меню, как на Википедии, чтобы мы могли, нажав на какой-то конкретный раздел, сразу перейти к нему и увидеть, что же там написано.
А сейчас конкретно: как это делается. Сначала создадим некий набор ссылок, при нажатии на которые мы будем переходить вниз. Выбираем место в документе, где будем размещать оглавление, сейчас это 12 строка, после вступительной части. При этом само оглавление изначально будет не только ссылками – лучше всего положить ссылки в тег списка, просто чтобы это визуально хорошо смотрелось и действительно было похоже на некое меню. Структура одного конкретного пункта очень простая: тег li, внутри него лежит тег a. Дальше в тег a мы заносим какой-либо смысловой текстовый кусок, как обычно делается в ссылках.
А вот и первый интересный момент – куда ссылаться? Ведь привыкли отсылать на другую страницу, документ. Здесь же другого документа нет. И когда ставится якорь, обязательно нужно поставить решетку (знак, что данная ссылка используется для перехода внутри текущей страницы), после неё нужно указать идентификатор элемента (некий его уникальный ключ), к которому мы будем переходить. Разумеется, пока такого ключа нет, ничего сделать нельзя, его необходимо создать. Около начала раздела о клиентах и серверах нужно прописать параметр id – идентификатор элемента. (Это можно сделать у любого тега, но сейчас удобней у заголовка, хотя в реальной практике это прописывалось бы около какого-нибудь контейнера обертки, вроде div или section.)
Кто уже не совсем новичок, наверняка видел использование этого атрибута для CSS, чтобы подключить стили, но сейчас у нас немного другая цель. Прописываем какой-нибудь айдишник, как его назвать – любой белибердой или как-нибудь осмысленно, разницы нет совершенно. (Но называть, разумеется, лучше по смыслу.) Давайте назовем раздел клиент-сервера очень банально: «client-server».
Теперь берем значение этого айдишника и копируем в ссылку, после знака #. Главное, чтобы у вас id якоря совпал с ссылкой на якорь. Мы вполне уже можем посмотреть на результат. Вот вы видите стоит ссылка клиент сервера, я сейчас на нее нажимаю – о, обратите внимание как сдвинулась страничка, якорь работает. А при этом если я сейчас рассмотрю вот эту зону, мы в адресной строке видим, что сюда подставилось значение клиент-дефис-сервер. Соответственно это означает, что якорь может быть не только внутри своей страницы, а вы можете дать какому-нибудь человеку прямую ссылку на вашу страницу, и когда он по этой ссылке перейдет, то сразу переместится в нужное место на этой страничке. Поставим другие якоря (когда один якорь сделан – дальше все идет очень однотипно – просто находите нужные элементы конкретных разделов, и вписываете новые айдишники). Здесь главное не запутаться и не назвать случайно два айдишника одинаково – это будет ошибкой со всех сторон – и с точки зрения создания якорей для ссылок, и с точки зрения валидности кода, то есть его правильности, потому что на каждой странице может быть только один идентификатор с определенным названием. Создаем 4 идентификатора (каждый из них должен называться совершенно по-разному), и теперь копируем все ссылки, вставляем в них заголовки (их копируем со статьи) – это и будет визуальная часть ссылки. Теперь можем обновить страницу и полюбоваться на то, как работают якоря.
И не случайно сделаны все 4 якоря, несмотря на то, что многие из вас могли подумать, что после первого якоря эту тему можно было бы заканчивать. Дело в том, что визуально корректно работает только первый якорь. Все остальные якоря работают как-то странно, особенно это хорошо будет видно при нажатии на якорь «Java Script – красота в движении». Видите, у нас страница при нажатии на «Java Script» пролистнулась до «HTML и CSS». Это произошло из-за того, что дальше листать некуда. То есть страница рада бы поставить вверх вот эту вот часть, чтобы раздел «Java Script» был где-нибудь выше. Но как она это сделает? Дальше нет полосы прокрутки и поэтому, если ваши якоря будут так работать – не пугайтесь, это совершенно нормально. Если вставить много текста, то при нажатии на якорь все будет хорошо. Поэтому совершенно нормально, когда якоря пролистывают вас до максимально возможного места.
Тема якорей простая, и при этом они считаются очень удобным способом навигации по какой-либо странице с большим количеством контента. При этом у тех из вас кто чуть более наблюдательный, может возникнуть такой интересный вопрос – а плавное пролистывание – это якоря или нет? Ведь на сайтах часто можно увидеть такую систему: действительно есть какая-то навигация, которая листает вас в рамках страницы, но при этом всё работает плавно. Это вроде якоря, а вроде и нет. Да, это якоря, но на самом деле HTML не умеет делать плавный проворот, это умеет делать только JavaScript. Но все-таки JavaScript – это немного не по нашей теме.
На этом все, всем успехов, изучайте HTML, отличного настроения и до новых встреч!
