Павел Косенко (pavel_kosenko) wrote,
Павел Косенко
pavel_kosenko

Category:

Ссылка с прокруткой страницы

Лирическое вступление

Эх, не хотел я у себя в журнале про HTML писать, но видимо придётся :) За неделю два раза один и тот же вопрос. Третий раз я не выдержу :) Проще один раз написать и потом ссылку давать. Это как в математике, есть только три числа: 0 = нисколько, 1 = один, 2 = много. Если 2 раза спросили, значит надо в общем виде делать. Т.к. тега подходящего для этого поста нет, пришлось завести новый - html. Сразу скажу, я не являюсь большим специалистом по HTML, просто чуток разбираюсь. Кстати, довольно много информации про HTML-вёрстку для ЖЖ есть вот тут:

http://wildmale.livejournal.com/26455.html

Важно для понимания! Чтобы использовать в ЖЖ прелести HTML, писать необходимо только в режиме HTML. Ни в коем случае не в режиме "Визуальный редактор" - в нём нифига не получится, т.к. в этом режиме вставленные в текст HTML-теги игнорируются.

Про ссылку с прокруткой <A href="#name"></A>

Вопрос. Текст предполагает сноски. Как сделать так, чтобы значки сносок были ссылками, при нажатии на которые страница прокручивалась вниз? До того места, где идёт расшифровка сносок.

Ответ (пример HTML-кода).

Здесь идёт текст. А вот тут нам нужна первая сноска<a href="#foot_comment1"><sup>1</sup></a>.
Здесь идёт текст. А вот тут нам нужна вторвя сноска<a href="#foot_comment2"><sup>2</sup></a>.
...
<small><a name="foot_comment1"></a>1. Тута пошла расшифровочка первого коммента.</small>
<small><a name="foot_comment2"></a>2. Тута пошла расшифровочка второго коммента.</small>

Как выглядит результат

Здесь идёт текст. А вот тут нам нужна первая сноска1. Здесь идёт текст. А вот тут нам нужна вторвя сноска2.

Здесь идёт много-много текста. Нам нужно написать здесь много текста, чтобы мы могли увидеть результат действия прокрутки. Потому что между ссылкой и якорем должен быть текст. Ссылка - это то, на что можно нажать. Якорь - это то место, до которого прокрутится страница. Якорь не отображается в тексте, это лишь метка, до куда прокручивать. Нажмите на ссылочки с цифорками 1 или 2 в предыдущем абзаце, чтобы увидеть результат действия прокрутки.

Много текста, много текста, много текста.
Много текста, много текста, много текста.
Много текста, много текста, много текста.
Много текста, много текста, много текста.
Много текста, много текста, много текста.
Много текста, много текста, много текста.
Много текста, много текста, много текста.
Много текста, много текста, много текста.
Много текста, много текста, много текста.
Много текста, много текста, много текста.
Много текста, много текста, много текста.
Много текста, много текста, много текста.
Много текста, много текста, много текста.
Много текста, много текста, много текста.
Много текста, много текста, много текста.
Много текста, много текста, много текста.
Много текста, много текста, много текста.
Много текста, много текста, много текста.
Много текста, много текста, много текста.
Много текста, много текста, много текста.
Много текста, много текста, много текста.
Много текста, много текста, много текста.
Много текста, много текста, много текста.
Много текста, много текста, много текста.

1Тут пошла расшифровочка первого коммента.
2Тут пошла расшифровочка второго коммента.

Примечания

1. В моём примере foot_comment1 и foot_comment2 - это имя якорей. Имя должно быть уникально для каждой ссылки. Желательно, чтобы имя состояло только из символов латинского алфавита, нижнего подчёркивания и цифр. Говорят, современные браузеры воспримут якоря и на русском языке, но русских символов в HTML-коде лучше избегать полностью. Для пущей надёжности.

2. Тег <sup> я использовал для того, чтобы "приподнять" ссылки над основной строкой текста - обычно именно так делается в полиграфической вёрстке.

3. Тег <small> я использовал для того, чтобы уменьшить размер шрифта для текста самих сносок.

4. Страница может прокручиваться не только вниз, но и вверх. Для этого ссылку с уникальным именем необходимо расположить ниже по тексту, а якорь - выше.

К сожалению, здесь нам снова придётся написать много текста, иначе мы не увидим действие представленных выше ссылок с прокруткой.

Много текста, много текста, много текста.
Много текста, много текста, много текста.
Много текста, много текста, много текста.
Много текста, много текста, много текста.
Много текста, много текста, много текста.
Много текста, много текста, много текста.
Много текста, много текста, много текста.
Много текста, много текста, много текста.
Много текста, много текста, много текста.
Много текста, много текста, много текста.
Много текста, много текста, много текста.
Много текста, много текста, много текста.
Много текста, много текста, много текста.
Много текста, много текста, много текста.
Много текста, много текста, много текста.
Много текста, много текста, много текста.
Много текста, много текста, много текста.
Много текста, много текста, много текста.
Много текста, много текста, много текста.
Много текста, много текста, много текста.
Много текста, много текста, много текста.
Много текста, много текста, много текста.
Много текста, много текста, много текста.
Много текста, много текста, много текста.

Урок окончен, все свободны :)
Tags: жизнь, заметки
Subscribe
promo pavel_kosenko january 1, 2010 00:05
Buy for 50 tokens
Полный список фототуров и выездных мастер-классов: http://www.frameway.club
  • Post a new comment

    Error

    Anonymous comments are disabled in this journal

    default userpic

    Your reply will be screened

    Your IP address will be recorded 

  • 27 comments