Якорь

[KASich]

Здраствуйте. Интересует реализация не совсем стандартного якоря.

Использую joomla re 1.0 (куча раз хакнута и куда глюков имеется)

Тематика и структура страницы: страница турфирмы, на странице расположены туры по категориям (экскурсионные, комбинированные и т.д.), разделены тегами <h2>

Требуется: сделать навигацию внутри сайта (поставить вверху ссылки "Экскурсионные тур", "Комбинированные туры" и т.д. которые ведут к нужным турам)

Решение: Ипользовать якоря.

<a href="#ex-tours">Экскурсионные туры</a>
...
<a name="ex-tours"></a>
<h2>Экскурсионные туры</h2>

Результат: при нажатии на ссылку страница пролистывается вниз до соответсвующего "якоря", при этом загаловок категории в <h2> встает в самый верх и для пользователя не сразу видно, что и откуда начинается...

Пути решения: поставить якорь на несколько строчек выше заголовка категории <h2>

Проблема решения: страница постояно обновляется, ежедневно добавляют и удаляются туры. Каждый раз смотреть, как далеко находится "якорь" от заголовка категории <h2> немного напряжно.

Что хотелось бы получить: хочется единоразово поставить якорь таким образом, чтобы при клике на ссылку, категория туров <h2> была по середине (ну или хотя бы примерно по середине). Возможно есть какой-нить прием (о котором я еще не слышал) чтобы страница прокручивалась на якорь+400px

Какие есть решения данной ситуации?

[klierik]

На H2 повесить relative. В него поместить якорь с visibility:hidden;

Якорь позиционировать position:absolute с отрицательным значением top.

[KASich]

Спасибо. Помогло

<a href="#ex-tours">Экскурсионные туры</a>
...
<h2 style="position:relative;"><a name="ex-tours" style="visibility:hidden;position:absolute;top:-400px;></a>Экскурсионные туры</h2>

[Вячеслав.]

Подскажите пожалуйста, как решить похожую проблему.

В H2 влезть не могу, ибо шаблон не позволяет. h2 просто в поле шаблона вставляется.

Пробовал такой якорь <div style=”position:relative; top:-50px;”><a name="z"></a></div>

Не работает.

Т.е необходимо, чтобы страница открывалась на 50px выше места установки якоря.

А ссылка у меня на якорь с другой страницы.

<a onclick="window.open('http:___html#z','','scrollbars=yes,menubar=yes,resizable=yes,toolbar=yes,status=yes,width=850,height=800,left=60,top=30');return false;" href="http:___html#z" target="_parent">Туды</a>

Или как бы сделать, чтобы новая страница открывалась на 200px ниже начала страницы?

Edited January 9, 2012 by Вячеслав.

[Вячеслав.]

<div style=”position:relative; top:-50px;”><a name="z"></a></div>

Сегодня непонятно почему эта конструкция вдруг заработала. Кроме Гугльхрома.

При использовании вместо якоря id заработало и в Хроме.

Еще осталась проблема:

<a onclick="window.open('http:___html#z','','scrollbars=yes,menubar=yes,resizable=yes,toolbar=yes,status=yes,width=850,height=800,left=20');return false;" href="http:___html#z" target="_parent">Туды</a>

новое окно корректно открывается в IE и мозиле.

А в Опере и хроме открывается новой вкладкой на весь экран, а в опере еще и без адресной строки.

???

[Вячеслав.]

<a onclick="window.open('http:___html#z','','scrollbars=yes, menubar=yes,resizable=yes,toolbar=yes,width=850,height=800,left=20' );return false;" href="http:___html#z" target="_parent">Туды</a>

Если убрать status, работает и в хроме. Осталась опера.

Подскажите пожалуйста, parent работает в опере или у меня как то не так все настроено?