Html. Как заставить браузер делать отступ от верхней границы при переходе по якорным ссылкам?

Question

[Андрей Мацовкин]

Дано:

— есть страница (xhtml) с табличными данными.

— в таблице сделан «липкий» заголовок (при прокрутке страницы заголовок таблицы прилипает к верхнему краю и остается там). Примерно как в результатах поиска Яндекса.

— в таблице есть якорные ссылки.


Проблема:

при переходе по якорной ссылке браузер позиционирует страницу таким образом, что якорь, на который мы перешли, оказывается в самом верху страницы и попадает под «липкий» заголовок. Т.е. искомую строку данных не видно — ее перекрывает заголовок.


Задача:

сделать переход по якорю с отступом на высоту заголовка.


Может уже кто решал такую задачу?


Пока пришли в голову такие варианты:

1. сместить якорь на 1-2 строки ниже, но это нарушит логику, к тому же строки могут быть разной высоты.

2. писать скрипт, который при клике отматывает страницу на заданное смещение, но тут надо смещение вычислять как-то динамически.

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

Answer 1

[Softlink]

Могу предложить такой вариант. На один элемент больше, но без скриптов.

Comments

[Андрей Мацовкин]

Спасибо. Об абсолютном позиционировании не подумал.
Отличный вариант. Пожалуй, остановлюсь на нем. Без скриптов надежнее.

[Елена]

Softlink круто, мне тоже помогло, хотя может на сегодня есть другой способ)

Answer 2

[UseRifle]

не проверял, но попробуйте задать элементу отрицательный margin-top и в равной величине положительный padding-top

Comments

[Андрей Мацовкин]

Спасибо. Вариант не пробовал, т.к. эти свойства частично задействованы.
Однако вариант с дополнительным элементом, предложенный комментарием выше — работает на ура.

Answer 3

[buynyj]

https://www.youtube.com/watch?v=o6eJ1K_1CKA" с 8-ой минуты

Comments

[venomprog]

чел, ты лучший)))

Answer 4

[Станислав]

А вы не пробовали jquery.scrollTo? (http://archive.plugins.jquery.com/project/ScrollTo)

Comments

[Андрей Мацовкин]

Спасибо за ссылку. Ранее не попадалась.
В данном случае вариант не подошел бы, т.к. сайт заказчика на Joomla, а там по умолчанию Mootools.

В результате изысканий, реализовал второй вариант. Оказалось проще, чем предполагал поначалу.
Вот, если кратко (ищем ссылки на якоря, вешаем обработчик, который ищет якорь, и отматывает на него, компенсируя высоту заголовка):
$$('a[href^=#]').each(function(el) {
el.addEvent('click',function(){
var head_height = 97;
href = this.getProperty('href');
anchor_offset = $$(href).getLast().getPosition().y;
window.scrollTo(0, anchor_offset - head_height);
return false;
});
});


[Андрей Мацовкин]

К тому же, в скрипте выявились недочеты. Точнее не учтенный вариант.
Скрипт не поможет в случае прямого перехода на страницу по якорной ссылке: page.html#ref