У внимательных админов всегда в тех или иных случаях вполне резонно возникают некоторые вопросы касаемые отработки того или иного функционала! что, в общем, резонно. И сегодня речь о том, как сделать при переходе по якорной ссылки отступ от верха окна браузера — это бывает, например, полезно, если на сайте используется так называемое «липкое меню», то есть закреплено сверху.
В этом случае якорная ссылка будет скрыта элементами меню, а потому весьма целесообразен отступ от верхней границы окна браузера…
Давайте рассмотрим некоторые варианты и решения, нюансы, рекомендации… (сводка php html css):
Делаем отступ якорной ссылки от верха окна браузера
Можно воспользоваться этим кодом JS:
<script>
$(function(){
$( 'a[href*=#]' ).click( function() {
if ( location.pathname.replace( /^\//, '' ) == this.pathname.replace( /^\//, '' )
&& location.hostname == this.hostname ) {
var $target = $( this.hash );
$target = $target.length && $target || $( '[name=' + this.hash.slice(1) +']' );
if ( $target.length ) {
var targetOffset = $target.offset().top - ( $( "#main" ).outerHeight( true ) + 50 ); //#main заменить на ваш элемент
$( 'html,body' ).animate( {scrollTop: targetOffset }, 1800 ); // скорость скролла
return false;
} } }); });
</script>
…где опции: #main контейнер обработки: + 50 — расстояние отступа в px. 1800 — это скорость прокрутки страницы.
Код дан только для примера:
JS отработка в этом случае, скажем так, распространяется на все якорные ссылки! (если у вас имеется Кнопка наверх — может не работать при использовании данного кода: придётся его немного подработать).
Код возможно добавить либо прямо в файл страницы, на которой необходима обработка якорных ссылок, либо для всего сайта. Или же организовать отдельный файл.js в ядре шаблона.
Ну а как организовать подключение JS, можно почитать эти посты: как правильно зарегистрировать JS файл — подключение JS jQuery или, скажем, этот: как организовать подключения js скриптов в файлах шаблона — событие wp_footer — без перегрузок!
отступ якорной ссылки от верха окна браузера средствами CSS
Сегодня, чтобы решить вопрос отступа ссылки якоря от верха браузера, достаточно воспользоваться строкой css. Вопрос будет решён и закрыт.
:target{scroll-margin-top:50px;}
…ниже вариант, если необходимо скорректировать отступ не помещая код css в файл стилей, но разместить прямо в html коде. Сделать это можно таким образом:
<style>:target{scroll-margin-top:50px;}</style>
Если остались вопросы, внимательно слушаю…
конструктивное и целеSEOбразное создание и продвижение сайтов — ATs media (запросто с WordPress):
mihalica.ru !
Михаил ATs - 
