Создание ссылок на определенные части страницы сайта может быть полезным для улучшения пользовательского опыта и облегчения навигации пользователя по вашему сайту. Якорные ссылки позволяют пользователям переходить к определенным блокам или разделам вашей страницы с помощью одного нажатия. В этом гиде мы рассмотрим, как создать такие ссылки на вашем сайте.
Для создания якорных ссылок на вашем сайте вам понадобится знание HTML и CSS. Первым шагом является создание самой якорной ссылки. Для этого вы можете использовать тег , установив атрибут href со значением «#», и добавив атрибут name к элементу, к которому вы хотите создать якорь. Например, если вы хотите создать ссылку, которая будет перенаправлять пользователя к заголовку вашей страницы, вы можете сделать следующее:
<a href="#header">Перейти к заголовку</a>
В приведенном примере мы использовали атрибут name со значением «header» для создания якоря. Теперь, когда пользователь нажимает на ссылку «Перейти к заголовку», страница будет автоматически прокручиваться до нужного блока.
Кроме того, вы можете создать ссылку на другую страницу с использованием якорных ссылок. Для этого просто добавьте ID к нужному элементу на странице, а затем укажите этот ID в атрибуте href ссылки. Например, если у вас есть другая страница с ID «contact» и вы хотите создать ссылку на эту страницу, вы можете сделать следующее:
<a href="contact.html#contact">Свяжитесь с нами</a>
Что такое якорные ссылки и как они работают?
Якорные ссылки, также известные как якоря или якорные элементы, представляют собой способ создания ссылок на определенную часть страницы веб-сайта. Они позволяют пользователям переходить к конкретному разделу на странице, без необходимости прокручивать весь контент страницы.
Работа якорных ссылок основана на использовании идентификаторов (ID) и HTML элемента «анкор» (<a>) .
Для создания якорной ссылки нужно выполнить два шага:
- Вставить якорный элемент (<a>) с атрибутом «href», который указывает на ID целевого элемента.
- Например: <a href=»#section1″>Перейти к секции 1</a>.
- Установить ID для целевого элемента.
- Например: <h3 id=»section1″>Секция 1</h3>.
При клике на якорную ссылку веб-браузер переходит к целевому элементу на странице, прокручивая содержимое до его видимой области. Якорная ссылка не перенаправляет пользователя на новую страницу, а лишь перемещает его к нужной секции на текущей странице.
Якорные ссылки особенно полезны для длинных страниц с большим количеством разделов. Они помогают упростить навигацию пользователей по странице, улучшают пользовательский опыт и позволяют легко привлекать внимание к определенным частям контента.
Якорная ссылка позволяет создать ссылку на определенную часть вашего веб-сайта
Якорная ссылка – это ссылка, которая позволяет перейти к определенной части веб-страницы без необходимости прокрутки. Она очень полезна в случаях, когда вам нужно направить пользователей к конкретному разделу вашего контента.
Для создания якорной ссылки необходимо использовать следующие шаги:
- Определите часть страницы, к которой вы хотите создать якорную ссылку. Для этого вы можете использовать любой элемент на странице, такой как заголовок, абзац или таблицу.
- Вставьте якорь в нужное место с помощью тега
<a name="anchor"></a>. Вместо «anchor» вы можете использовать любое уникальное имя, которое будет служить идентификатором для якоря. - Создайте ссылку на якорь с помощью тега
<a href="#anchor">текст ссылки</a>. Вместо «anchor» укажите имя якоря, а вместо «текст ссылки» – текст, который будет виден пользователю.
Пример создания якорной ссылки:
<p>Перейти к <a href="#section1">разделу 1</a>.</p>
Где «section1» – имя якоря, а «разделу 1» – текст, который будет виден как ссылка.
При клике на якорную ссылку, браузер переместит пользователя к месту на странице, где расположен якорь с указанным именем. Таким образом, пользователь сразу попадает на нужную часть контента без необходимости скроллирования страницы.
Якорные ссылки могут быть особенно полезны в длинных веб-страницах с большим количеством разделов или в тех случаях, когда вы хотите поделиться конкретной информацией с другими людьми.
Теперь у вас есть все необходимые знания для создания якорных ссылок на вашем веб-сайте. Используйте эту возможность, чтобы улучшить навигацию и удобство использования вашего сайта.
Как создать якорную ссылку
Якорная ссылка — это ссылка, которая позволяет перейти к определенной части страницы, вместо того чтобы перенаправлять пользователя на другую страницу. Создание якорной ссылки включает несколько шагов:
- Определите местоположение, к которому вы хотите создать якорную ссылку. Это может быть определенная часть текста, заголовок, таблица и т.д.
- Вставьте якорь в эту часть страницы, используя тег
<a name="название">. Название может быть любым, но должно быть уникальным на странице. - Добавьте ссылку на якорь в нужном месте на странице. Для этого используйте тег
<a href="#название">. Вместоназваниеукажите название якоря, к которому вы хотите перейти. - Сохраните и опубликуйте страницу.
Приведенный ниже пример демонстрирует, как создать якорную ссылку:
| Код | Результат |
|---|---|
|
Таким образом, якорная ссылка позволяет пользователям быстро перемещаться по вашей странице и находить нужную информацию более удобно.
Расположение на странице якорной ссылки
При создании якорной ссылки на странице, очень важно выбрать правильное место для размещения самого якоря. Якорь – это точка на странице, к которой будет переходить пользователь после клика на ссылку. Расположение якоря может существенно повлиять на удобство навигации по сайту.
Существует несколько вариантов для размещения якорных ссылок:
- В начале страницы – одной из наиболее часто используемых практик является размещение якорной ссылки в начале страницы, перед основным контентом. Такой вариант особенно удобен, когда на странице есть длинный текстовый блок или таблица, и пользователю нужно быстро переместиться к нужному разделу.
- После каждого заголовка – если на странице присутствуют несколько заголовков, разделенных на разные разделы или категории, можно создать якорь после каждого заголовка. Такой вариант позволяет пользователю мгновенно переходить к нужному разделу, минуя весь остальной контент.
- В конце страницы – другой вариант размещения якорных ссылок – в конце страницы, после основного контента. Такой вариант может быть удобен, если страница имеет длинный скроллируемый блок и пользователю необходимо быстро вернуться к началу или к какой-то другой важной части страницы.
Важно также учитывать, что якорные ссылки должны быть достаточно заметными для пользователей. Часто используются подчеркнутый текст, другой цвет или жирное начертание для создания активной ссылки. Это позволяет пользователю легко определить, что это якорная ссылка и она активна для перехода.
Выбор оптимального расположения якорной ссылки зависит от контекста и целей сайта. Важно помнить о наглядности и удобстве использования якорных ссылок для пользователей.
Задавайте вопросы, получайте полезные советы и помощь от других пользователей
Как создать якорную ссылку на определенную часть страницы?
Чтобы создать якорную ссылку на определенную часть страницы, вам необходимо добавить якорь к нужному элементу на странице через тег . В качестве значения атрибута href укажите #, а в атрибуте name или id — название якоря. Затем создайте ссылку на этот якорь, указав его название в адресной строке после #. Таким образом, при клике на ссылку, страница будет прокручена до этого якоря.
Как задать якорь для элемента на странице?
Чтобы задать якорь для элемента на странице, вам необходимо добавить атрибут id или name к нужному HTML-элементу. В качестве значения этого атрибута используйте название, по которому вы хотите сделать ссылку. Например, для элемента
, который имеет заголовок «О нас», вы можете добавить атрибут id=»about», чтобы задать якорь «about» для этого элемента.
Как создать ссылку на якорь на другой странице? Чтобы создать ссылку на якорь на другой странице, вы должны указать в адресе ссылки абсолютный или относительный путь к этой странице и затем добавить символ # и название якоря после него. Например, если вы хотите создать ссылку на якорь «about» на странице «example.html», то адрес ссылки будет выглядеть так: example.html#about. Можно ли сделать якорную ссылку на элемент, который находится скрытым на странице? Да, можно сделать якорную ссылку на элемент, который находится скрытым на странице. Однако при клике на эту ссылку страница не будет прокручиваться к скрытому элементу. Если вы хотите сделать такую ссылку, то якорь должен быть задан для элемента перед его скрытием. Если скрытие элемента происходит динамически, например, с помощью JavaScript, то вы должны задать якорь после скрытия элемента, когда он станет доступным на странице.
20 комментариев:
Blogger считает, что пользователь ошибся, размещая href без полного URL и исправляет ошибку.
2. Нет ли возможности сделать подсветку синтаксиса, в приводимых примерах кода html, css и пр.? NMitra 1) http://shpargalkablog.ru/2010/12/napisat-kod-tekstom.html
анкор NMitra В комментариях стили не пропускаются. Анонимный Здравствуйте NMitra!
Вопрос про хэш-ссылки. По умолчанию браузер при переходе по хэш-ссылке показывает ее содержимое в самом верху окна.
У меня в самом верху меню закреплено с помощью position:fixed;
и поэтому начало нужного текста при переходе по хэш-ссылке (а это обычно подзаголовок) не видно.
То есть посетитель теряется и не понимает куда его привела хэш-ссылка.
Как бы каким-то скриптом сделать так, чтобы когда браузер видит, что переход идёт по хэш-ссылке, он как бы
отматывал страницу пониже на заданное число пикселей? И якорь бы вылезал из под шапки (меню).
А если бы еще этот якорь как-нибудь при переходе подсвечивался. ну там бекграунд#FF0000 это было бы круто:)
С уважением, Владимир NMitra Здравствуйте, шикарный вопрос! Пока не готова дать на него ответ NMitra Владимир, есть ответ http://jsfiddle.net/NMitra/7g9mn63b/2/ Анонимный NMitra, спасибо!
Отличное решение. Простой css, и всё работает (кроме background — ну и ладно). А в инете предлагаются большие скрипты, которые у меня все равно не получается подключить)
С уважением, Владимир NMitra Как то так http://shpargalkablog.ru/2014/03/table-of-contents-html5.html#background Alex Fialka Здравствуйте! Подскажите, как сделать картинку с ссылкой на конец страницы? NMitra Здравствуйте, вместо смайлика свою картинку
Более того, в тег a можно одновременно поместить и картинку, и текст:
Ярлыки
При нажатии на кнопку «Подробнее» под анонсом сообщения, я перехожу к полному тексту сообщения, но к той его части, где был указан разрыв страницы. Это выглядит не очень красиво. Можно как-то изменить код, чтобы после нажатия на кнопку «Подробнее» повлялось сообщение полностью, а не продолжение?
Вы имеете ввиду у Вас в блоге так. Да несовсем удобно, скорее всего у Вас нестандартный шаблон, просто надо убрать в теле шаблона ненужный скрипт.
Я сделал шаблон с помощью Artisteer. Он мне ещё вместо ссылки «Подробнее» втулил кнопку, что мне тоже не нравится.
Как мне это исправить? И как убрать этот ненужный скрипт, где его искать?
Надо смотреть в коде шаблона! так сразу не скажу! надо посмотреть Ваш блог
Это пока трудно назвать блогом, но посмотреть можно тут:
http://portable-rus.blogspot.com/
Кнопка подробнее мне вполне нравиться, что не устраивает! если скинете мне сам шаблон я найдум у себя где ее удалить можно, потом Вам напишу !
А воообще в html коде шаблона ищите слово Подробнее, и найдете скрипт с этой кнопкой и просто его удалите!
Да, кнопка пусть будет, она по дизайну подходит. Нужно только изменить ссылку, по которой эта кнопка переводит нас к полному сообщению, а полностью скрипт удалять нельзя. Слова «Подробнее» в коде нет, я нашёл это место по слову «more» и думаю, что вот здесь нужно что-то изменить:
Если щелкнуть по заголовку, то переходишь к полному сообщению, а не к продолжению. Нужно как-то и сюда вставить такую же ссылку.
Я из кода удалил все крючки, а то Ваш редактор не принимает код.
А как Вам выслать шаблон?
добрый день)) может быть, вы мне сможете помочь. мне нужно сделать ссылку в таблице на одной странице на конкретное more части контента на другой странице (контент поделен на несколько частей, у каждого — свое more). каким образом это осуществимо?
буду благодарна за совет))
Да ссылку добавить просто перед словом якорь и /, впринципе должно сработать!
Подсказки
???? Чтобы отправить пользователя в самый верх страницы, используйте href = » # top» или href = » # » .
???? Указывайте атрибут href для ссылок, без него они неотличимы от и перестают иметь смысл. Спецификация HTML допускает «логические» ссылки без href для текущих или будущих ссылок, но практической пользы в этом мало.
???? Якорная ссылка может также вести и на нужный раздел внешней страницы. Для этого используйте URL-ссылку, а в конце, после знака # , добавьте ID якоря. Например: https recipe
Как Сделать Ссылку на Часть Страницы СайтаЧтобы зарегистрироваться на бесплатный интенсив и получить в подарок подборку файлов от GeekBrains, заполните информацию в открывшемся окне
Вадим Макеев советует
???? Когда нужно сделать навигацию в пределах одной страницы, например, оглавление, удобно использовать якоря — то есть ссылки на отдельные элементы. При нажатии на ссылку браузер мгновенно переместится к этому элементу.
Чтобы перемещение по якорю было плавным, можно добавить свойство scroll — behavior контейнеру, который будет прокручиваться. Чаще всего, это :
Обратите внимание, что уникальность id важна, поскольку браузер рассчитывает, что на странице есть только один такой элемент и найдёт только первый по коду, а до второго не дойдёт. Расстановку таких id лучше поручить шаблонизатору, он точно не ошибётся.
Например, генераторы статики умеют делать уникальный id из содержимого заголовка:
Иногда перемещение по якорю прокручивает страницу впритык к целевому элементу, обрезая родительский контейнер. Это можно исправить, если поставить id на родительский контейнер, либо с помощью свойства scroll — margin — оно добавит нужный отступ.
Как вставить ссылку в HTML
Для того чтобы разместить ссылку на главную страницу сайта, используйте следующий HTML-код:
Результат:
Blogwork — Главная страница
Ссылка на внутреннюю страницу сайта в виде html-кода выглядит так:
Результат:
Blogwork — Внутренняя страница
Для того чтобы вставить ссылку на pdf-документ, html-код выглядит так:
Результат:
Blogwork — PDF
Для того чтобы вставить ссылку на картинку, html-код выглядит так:
Результат:
Blogwork — PNG
Обратите внимание на параметр href. В каждой из ссылок он включает в себя адрес — местонахождение той страницы (ее части, или файла), куда попадет пользователь, нажав на эту ссылку.
Как сделать ссылку активной на сайте в HTML-разметке? Для этого необходимо написать следующую комбинацию кода:
Как вставить картинку с ссылкой или ссылку на картинку
Чтобы вставить ссылку на сайт в виде изображения или кнопки, вам потребуются знание того как вставить картинку в html. Порядок действий такой: вставляем картинку в HTML и затем оборачиваем ее ссылкой, то есть помещаем тег img (который запрашивает картинку) внутри тега
Ну а если вы хотите вставить ссылку не на картинку, а на другую статью на сайте, значит замените содержание параметра href на нужное — поместите туда ссылку на статью.
Более того, в тег a можно одновременно поместить и картинку, и текст:
Как перейти по неактивной ссылке
Под или (англ., click — щелчок) ссылкой понимается адрес другой страницы, нажав на который ничего не произойдёт, так как это не гиперссылка, а текст:
- Выделить этот участок текста, нажать на правую клавишу мышки, в появившемся контекстном меню будет предложено перейти на страницу с отмеченным адресом, щёлкнуть по необходимому пункту.
- Выделить этот участок текста, нажать на правую клавишу мышки, в появившемся контекстном меню выбрать пункт «Копировать» (cм. пункт «Копировать» на Рис.5), выделить или удалить адрес страницы в адресной строке браузера, нажать на правую клавишу мышки, в появившемся контекстном меню выбрать пункт «Вставить» (cм. пункт «Вставить» на Рис.4).
- Выделить этот участок текста, нажать комбинацию клавиш клавиатуры Ctrl + C , выделить или удалить адрес страницы в адресной строке браузера, нажать комбинацию клавиш клавиатуры Ctrl + V .
- На сенсорных устройствах (смартфон, планшет) процедура требует определённой ловкости. Нужно нажать на этот участок текста и долго без движения держать палец на экране, пока не появятся ползунки. Их можно раздвинуть на необходимое расстояние. Далее следует нажать в появившейся панели кнопку «Копировать». Затем долго жать на адрес в адресной строке браузера, после того, как весь адрес будет выделен, щёлкнуть в появившейся панели кнопку «Вставить».
- Ввести этот участок текста в адресную строку браузера используя клавиатуру, можно без протокола http:// (или https:// ).
В рассылке приходят тематические подборки, советы, авторские и партнёрские колонки
Содержание статьи
- 1 Что такое якорные ссылки и как они работают?
- 2 Якорная ссылка позволяет создать ссылку на определенную часть вашего веб-сайта
- 3 Как создать якорную ссылку
- 4 Расположение на странице якорной ссылки
- 5 Задавайте вопросы, получайте полезные советы и помощь от других пользователей
- 6 , который имеет заголовок «О нас», вы можете добавить атрибут id=»about», чтобы задать якорь «about» для этого элемента.
Как создать ссылку на якорь на другой странице? Чтобы создать ссылку на якорь на другой странице, вы должны указать в адресе ссылки абсолютный или относительный путь к этой странице и затем добавить символ # и название якоря после него. Например, если вы хотите создать ссылку на якорь «about» на странице «example.html», то адрес ссылки будет выглядеть так: example.html#about. Можно ли сделать якорную ссылку на элемент, который находится скрытым на странице? Да, можно сделать якорную ссылку на элемент, который находится скрытым на странице. Однако при клике на эту ссылку страница не будет прокручиваться к скрытому элементу. Если вы хотите сделать такую ссылку, то якорь должен быть задан для элемента перед его скрытием. Если скрытие элемента происходит динамически, например, с помощью JavaScript, то вы должны задать якорь после скрытия элемента, когда он станет доступным на странице.
20 комментариев:
Blogger считает, что пользователь ошибся, размещая href без полного URL и исправляет ошибку.
2. Нет ли возможности сделать подсветку синтаксиса, в приводимых примерах кода html, css и пр.? NMitra 1) http://shpargalkablog.ru/2010/12/napisat-kod-tekstom.html
анкор NMitra В комментариях стили не пропускаются. Анонимный Здравствуйте NMitra!
Вопрос про хэш-ссылки. По умолчанию браузер при переходе по хэш-ссылке показывает ее содержимое в самом верху окна.У меня в самом верху меню закреплено с помощью position:fixed;и поэтому начало нужного текста при переходе по хэш-ссылке (а это обычно подзаголовок) не видно. То есть посетитель теряется и не понимает куда его привела хэш-ссылка.
Как бы каким-то скриптом сделать так, чтобы когда браузер видит, что переход идёт по хэш-ссылке, он как быотматывал страницу пониже на заданное число пикселей? И якорь бы вылезал из под шапки (меню).
А если бы еще этот якорь как-нибудь при переходе подсвечивался. ну там бекграунд#FF0000 это было бы круто:)
С уважением, Владимир NMitra Здравствуйте, шикарный вопрос! Пока не готова дать на него ответ NMitra Владимир, есть ответ http://jsfiddle.net/NMitra/7g9mn63b/2/ Анонимный NMitra, спасибо!
Отличное решение. Простой css, и всё работает (кроме background — ну и ладно). А в инете предлагаются большие скрипты, которые у меня все равно не получается подключить)
С уважением, Владимир NMitra Как то так http://shpargalkablog.ru/2014/03/table-of-contents-html5.html#background Alex Fialka Здравствуйте! Подскажите, как сделать картинку с ссылкой на конец страницы? NMitra Здравствуйте, вместо смайлика свою картинку
Более того, в тег a можно одновременно поместить и картинку, и текст:
Ярлыки
При нажатии на кнопку «Подробнее» под анонсом сообщения, я перехожу к полному тексту сообщения, но к той его части, где был указан разрыв страницы. Это выглядит не очень красиво. Можно как-то изменить код, чтобы после нажатия на кнопку «Подробнее» повлялось сообщение полностью, а не продолжение?
Вы имеете ввиду у Вас в блоге так. Да несовсем удобно, скорее всего у Вас нестандартный шаблон, просто надо убрать в теле шаблона ненужный скрипт.
Я сделал шаблон с помощью Artisteer. Он мне ещё вместо ссылки «Подробнее» втулил кнопку, что мне тоже не нравится.Как мне это исправить? И как убрать этот ненужный скрипт, где его искать?
Надо смотреть в коде шаблона! так сразу не скажу! надо посмотреть Ваш блог
Это пока трудно назвать блогом, но посмотреть можно тут:http://portable-rus.blogspot.com/
Кнопка подробнее мне вполне нравиться, что не устраивает! если скинете мне сам шаблон я найдум у себя где ее удалить можно, потом Вам напишу !А воообще в html коде шаблона ищите слово Подробнее, и найдете скрипт с этой кнопкой и просто его удалите!
Да, кнопка пусть будет, она по дизайну подходит. Нужно только изменить ссылку, по которой эта кнопка переводит нас к полному сообщению, а полностью скрипт удалять нельзя. Слова «Подробнее» в коде нет, я нашёл это место по слову «more» и думаю, что вот здесь нужно что-то изменить:
Если щелкнуть по заголовку, то переходишь к полному сообщению, а не к продолжению. Нужно как-то и сюда вставить такую же ссылку. Я из кода удалил все крючки, а то Ваш редактор не принимает код.А как Вам выслать шаблон?
добрый день)) может быть, вы мне сможете помочь. мне нужно сделать ссылку в таблице на одной странице на конкретное more части контента на другой странице (контент поделен на несколько частей, у каждого — свое more). каким образом это осуществимо? буду благодарна за совет))
Да ссылку добавить просто перед словом якорь и /, впринципе должно сработать!
Подсказки
- 7 Как вставить ссылку в HTML
- 8 Как вставить картинку с ссылкой или ссылку на картинку
- 9 Как перейти по неактивной ссылке
У меня в самом верху меню закреплено с помощью position:fixed;
и поэтому начало нужного текста при переходе по хэш-ссылке (а это обычно подзаголовок) не видно.
То есть посетитель теряется и не понимает куда его привела хэш-ссылка.
отматывал страницу пониже на заданное число пикселей? И якорь бы вылезал из под шапки (меню).
Как мне это исправить? И как убрать этот ненужный скрипт, где его искать?
http://portable-rus.blogspot.com/
А воообще в html коде шаблона ищите слово Подробнее, и найдете скрипт с этой кнопкой и просто его удалите!
Я из кода удалил все крючки, а то Ваш редактор не принимает код.
А как Вам выслать шаблон?
буду благодарна за совет))
Blogwork — Главная страница
Ссылка на внутреннюю страницу сайта в виде html-кода выглядит так:
Blogwork — Внутренняя страница
Для того чтобы вставить ссылку на pdf-документ, html-код выглядит так:
Blogwork — PDF
Для того чтобы вставить ссылку на картинку, html-код выглядит так:
Blogwork — PNG
Обратите внимание на параметр href. В каждой из ссылок он включает в себя адрес — местонахождение той страницы (ее части, или файла), куда попадет пользователь, нажав на эту ссылку.
Содержание статьи
- 1 Что такое якорные ссылки и как они работают?
- 2 Якорная ссылка позволяет создать ссылку на определенную часть вашего веб-сайта
- 3 Как создать якорную ссылку
- 4 Расположение на странице якорной ссылки
- 5 Задавайте вопросы, получайте полезные советы и помощь от других пользователей
- 6 , который имеет заголовок «О нас», вы можете добавить атрибут id=»about», чтобы задать якорь «about» для этого элемента. Как создать ссылку на якорь на другой странице? Чтобы создать ссылку на якорь на другой странице, вы должны указать в адресе ссылки абсолютный или относительный путь к этой странице и затем добавить символ # и название якоря после него. Например, если вы хотите создать ссылку на якорь «about» на странице «example.html», то адрес ссылки будет выглядеть так: example.html#about. Можно ли сделать якорную ссылку на элемент, который находится скрытым на странице? Да, можно сделать якорную ссылку на элемент, который находится скрытым на странице. Однако при клике на эту ссылку страница не будет прокручиваться к скрытому элементу. Если вы хотите сделать такую ссылку, то якорь должен быть задан для элемента перед его скрытием. Если скрытие элемента происходит динамически, например, с помощью JavaScript, то вы должны задать якорь после скрытия элемента, когда он станет доступным на странице. 20 комментариев: Blogger считает, что пользователь ошибся, размещая href без полного URL и исправляет ошибку. 2. Нет ли возможности сделать подсветку синтаксиса, в приводимых примерах кода html, css и пр.? NMitra 1) http://shpargalkablog.ru/2010/12/napisat-kod-tekstom.html анкор NMitra В комментариях стили не пропускаются. Анонимный Здравствуйте NMitra! Вопрос про хэш-ссылки. По умолчанию браузер при переходе по хэш-ссылке показывает ее содержимое в самом верху окна.У меня в самом верху меню закреплено с помощью position:fixed;и поэтому начало нужного текста при переходе по хэш-ссылке (а это обычно подзаголовок) не видно. То есть посетитель теряется и не понимает куда его привела хэш-ссылка. Как бы каким-то скриптом сделать так, чтобы когда браузер видит, что переход идёт по хэш-ссылке, он как быотматывал страницу пониже на заданное число пикселей? И якорь бы вылезал из под шапки (меню). А если бы еще этот якорь как-нибудь при переходе подсвечивался. ну там бекграунд#FF0000 это было бы круто:) С уважением, Владимир NMitra Здравствуйте, шикарный вопрос! Пока не готова дать на него ответ NMitra Владимир, есть ответ http://jsfiddle.net/NMitra/7g9mn63b/2/ Анонимный NMitra, спасибо! Отличное решение. Простой css, и всё работает (кроме background — ну и ладно). А в инете предлагаются большие скрипты, которые у меня все равно не получается подключить) С уважением, Владимир NMitra Как то так http://shpargalkablog.ru/2014/03/table-of-contents-html5.html#background Alex Fialka Здравствуйте! Подскажите, как сделать картинку с ссылкой на конец страницы? NMitra Здравствуйте, вместо смайлика свою картинку Более того, в тег a можно одновременно поместить и картинку, и текст: Ярлыки При нажатии на кнопку «Подробнее» под анонсом сообщения, я перехожу к полному тексту сообщения, но к той его части, где был указан разрыв страницы. Это выглядит не очень красиво. Можно как-то изменить код, чтобы после нажатия на кнопку «Подробнее» повлялось сообщение полностью, а не продолжение? Вы имеете ввиду у Вас в блоге так. Да несовсем удобно, скорее всего у Вас нестандартный шаблон, просто надо убрать в теле шаблона ненужный скрипт. Я сделал шаблон с помощью Artisteer. Он мне ещё вместо ссылки «Подробнее» втулил кнопку, что мне тоже не нравится.Как мне это исправить? И как убрать этот ненужный скрипт, где его искать? Надо смотреть в коде шаблона! так сразу не скажу! надо посмотреть Ваш блог Это пока трудно назвать блогом, но посмотреть можно тут:http://portable-rus.blogspot.com/ Кнопка подробнее мне вполне нравиться, что не устраивает! если скинете мне сам шаблон я найдум у себя где ее удалить можно, потом Вам напишу !А воообще в html коде шаблона ищите слово Подробнее, и найдете скрипт с этой кнопкой и просто его удалите! Да, кнопка пусть будет, она по дизайну подходит. Нужно только изменить ссылку, по которой эта кнопка переводит нас к полному сообщению, а полностью скрипт удалять нельзя. Слова «Подробнее» в коде нет, я нашёл это место по слову «more» и думаю, что вот здесь нужно что-то изменить: Если щелкнуть по заголовку, то переходишь к полному сообщению, а не к продолжению. Нужно как-то и сюда вставить такую же ссылку. Я из кода удалил все крючки, а то Ваш редактор не принимает код.А как Вам выслать шаблон? добрый день)) может быть, вы мне сможете помочь. мне нужно сделать ссылку в таблице на одной странице на конкретное more части контента на другой странице (контент поделен на несколько частей, у каждого — свое more). каким образом это осуществимо? буду благодарна за совет)) Да ссылку добавить просто перед словом якорь и /, впринципе должно сработать! Подсказки
- 7 Как вставить ссылку в HTML
- 8 Как вставить картинку с ссылкой или ссылку на картинку
- 9 Как перейти по неактивной ссылке
