Html. Как заставить браузер делать отступ от верхней границы при переходе по якорным ссылкам?
Дано:
— есть страница (xhtml) с табличными данными.
— в таблице сделан «липкий» заголовок (при прокрутке страницы заголовок таблицы прилипает к верхнему краю и остается там). Примерно как в результатах поиска Яндекса.
— в таблице есть якорные ссылки.
Проблема:
при переходе по якорной ссылке браузер позиционирует страницу таким образом, что якорь, на который мы перешли, оказывается в самом верху страницы и попадает под «липкий» заголовок. Т.е. искомую строку данных не видно — ее перекрывает заголовок.
Задача:
сделать переход по якорю с отступом на высоту заголовка.
Может уже кто решал такую задачу?
Пока пришли в голову такие варианты:
1. сместить якорь на 1-2 строки ниже, но это нарушит логику, к тому же строки могут быть разной высоты.
2. писать скрипт, который при клике отматывает страницу на заданное смещение, но тут надо смещение вычислять как-то динамически.
3. вешать на клик обработчик с задержкой, который после перехода на якорь отматывает страницу на высоту заголовка.
Спасибо. Вариант не пробовал, т.к. эти свойства частично задействованы.
Однако вариант с дополнительным элементом, предложенный комментарием выше — работает на ура.
Спасибо за ссылку. Ранее не попадалась.
В данном случае вариант не подошел бы, т.к. сайт заказчика на 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
Простой
