Html якорь со смещением

Смещение html-якоря для корректировки на фиксированный заголовок

Я пытаюсь навести порядок в работе своих якорей. У меня есть заголовок, который зафиксирован в верхней части страницы, поэтому, когда вы ссылаетесь на якорь в другом месте страницы, страница переходит, так что якорь находится в верхней части страницы, оставляя содержимое за фиксированным заголовком (надеюсь, в этом есть смысл). Мне нужен способ сместить якорь на 25 пикселей от высоты заголовка. Я бы предпочел HTML или CSS, но Javascript также будет приемлемым.

28 ответов

Вы можете просто использовать CSS без JavaScript.

Затем вы можете расположить привязку со смещением выше или ниже того места, где оно фактически отображается на странице, сделав его блок-элементом и установив его относительно. -250px установит якорь на 250px

Это не создает никаких пробелов в контенте, и якорные ссылки работают очень хорошо.

Я тоже искал решение этой проблемы. В моем случае это было довольно легко.

У меня есть список меню со всеми ссылками:

И ниже этого заголовки, куда он должен идти.

one
 
text here
 
two
 
text here
 
three
 
text here
 
four
 
text here
 

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

Вместо этого я поместил тег span внутри моего тега с правильным идентификатором.

Теперь используйте 2 строки CSS, чтобы правильно расположить их.

Измените верхнее значение, чтобы соответствовать высоте вашего фиксированного заголовка (или больше). Теперь я предполагаю, что это будет работать и с другими элементами.

FWIW это сработало для меня:

Поскольку это проблема презентации, чистое решение CSS было бы идеальным. Однако этот вопрос был задан в 2012 году, и хотя были предложены решения по относительному позиционированию / отрицательной марже, эти подходы кажутся довольно хакерскими, создают потенциальные проблемы потока и не могут динамически реагировать на изменения в DOM / области просмотра.

Имея это в виду, я считаю, что использование JavaScript по- прежнему (февраль 2017 года) лучший подход. Ниже представлено решение vanilla-JS, которое будет реагировать на щелчки привязки и разрешать хэш страницы при загрузке (см. JSFiddle). Изменить .getFixedOffset() метод, если требуются динамические вычисления. Если вы используете jQuery, вот модифицированное решение с лучшим делегированием событий и плавной прокруткой.

(function(document, history, location) < var HISTORY_SUPPORT = !!(history && history.pushState); var anchorScrolls = < ANCHOR_REGEX: /^#[^ ]+$/, OFFSET_HEIGHT_PX: 50, /** * Establish events, and fix initial scroll position if a hash is provided. */ init: function() < this.scrollToCurrent(); window.addEventListener('hashchange', this.scrollToCurrent.bind(this)); document.body.addEventListener('click', this.delegateAnchors.bind(this)); >, /** * Return the offset amount to deduct from the normal scroll position. * Modify as appropriate to allow for dynamic calculations */ getFixedOffset: function() < return this.OFFSET_HEIGHT_PX; >, /** * If the provided href is an anchor which resolves to an element on the * page, scroll to it. * @param href * @return - Was the href an anchor. */ scrollIfAnchor: function(href, pushToHistory) < var match, rect, anchorOffset; if(!this.ANCHOR_REGEX.test(href)) < return false; >match = document.getElementById(href.slice(1)); if(match) < rect = match.getBoundingClientRect(); anchorOffset = window.pageYOffset + rect.top - this.getFixedOffset(); window.scrollTo(window.pageXOffset, anchorOffset); // Add the state to history as-per normal anchor links if(HISTORY_SUPPORT && pushToHistory) < history.pushState(<>, document.title, location.pathname + href); > > return !!match; >, /** * Attempt to scroll to the current location's hash. */ scrollToCurrent: function() < this.scrollIfAnchor(window.location.hash); >, /** * If the click event's target was an anchor, fix the scroll position. */ delegateAnchors: function(e) < var elem = e.target; if( elem.nodeName === 'A' && this.scrollIfAnchor(elem.getAttribute('href'), true) ) < e.preventDefault(); >> >; window.addEventListener( 'DOMContentLoaded', anchorScrolls.init.bind(anchorScrolls) ); >)(window.document, window.history, window.location); 

Источник

Прокрутка к якорю с отступом сверху на CSS

Верстка

Если вы занимаетесь версткой сайтов, или у вас уже есть свой сайт, то вы по любому сталкиваетесь или столкнётесь с якорными меню или оглавлением и следовательно с довольно частой проблемой. При переходе по ссылке-якорю верхняя часть контента скрывается (обычно это заголовок) к примеру фиксированным меню (это сейчас модно), в итоге пользователь просто не понимает куда он попал, что негативно сказывается на юзабилити сайта.

Для тех кто не в курсе что такое якоря — это ссылка на определённый фрагмент текста, в данной статье в верху стоит якорное меню, для быстрой навигации по статье.

Пример HTML разметки якорного меню:

Логика очень простая — вы кликаете на ссылку с якорем и перемещаетесь к самому якорю. И если сверху сайта есть фиксированный блок, то он скроет часть контента — как я писал выше. И ниже я рассмотрю несколько рабочих универсальных вариантов решения данной проблемы, при помощи CSS.

Универсальные варианты устранения смещения из-за фиксированного блока (шапка, меню).

Это может работать, но оно будет перекрывать содержимое перед заголовком. Вы можете добавить position: relative и z-index: -1 чтобы предотвратить наложение предыдущего содержимого.

При желании вы можете добавить следующее, если цель все еще отключена:

Если не помогло пишите , что не так. Помогла тоже пишите, какой вариант помог. Знаете более лучший вариант, делитесь.

Источник

Html якорь со смещением

5 способов создания ссылок-якорей с отступом сверху. Устранение смещения из-за фиксированного блока (шапка, меню).

При использовании ссылок-якорей на сайте, после перехода по ссылке, панель соц сетей закрывала верхнюю часть контента (как правило заголовок) и в итоге пользователю просто было непонятно, куда он в итоге попал

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

При использовании ссылок-якорей на сайте, после перехода по ссылке, панель соц сетей закрывала верхнюю часть контента (как правило заголовок) и в итоге пользователю просто было непонятно, куда он в итоге попал. Вы можете опробовать это сами, кликнув по ссылке «A» ниже.

А так как сейчас очень популярно делать фиксированные шапки и меню position:fixed, прилепленные к верхней части экрана, то думаю что этот пост будет интересен многим. В нём я рассмотрю несколько вариантов якорей с отступами от верхней границы экрана при переходе по ним.

Для более ясного понимания на все h2-заголовки я добавил заливку.

A: Стандартный якорь

Пример того, как работает стандартная ссылка-якорь. Если вы попали сюда, кликнув по ссылке, а не просто проскроллили страницу, то скорее всего заголовок у вас оказался полностью скрыт под панелью соц сетей.

Возможно было бы правильнее назвать пост не «5 методов…», а «4 метода…». Потому что это и не метод вовсе, а показательный пример того, как быть не должно, ну да ладно.

Б: Отступ в виде псевдоэлемента

Используем псевдоэлемент для добавления отступа перед элементом — :before или :after .

Поддержка браузерами: Chrome конечно же, IE8+, Firefox 3+, Opera 9.25+, Safari 3+.

Замечания:

• Требуется поддержка браузером CSS псеводоэлементов.
• Метод не работает корректно, если у элемента есть фон или заливка (наезжает на контент).
• Не работает корректно, если у элемента есть свойства padding-top или border-top .

#link-B:before { display: block; content: ""; height: 55px; margin: -55px 0 0; }

В: Положительный padding и отрицательный margin

Используем padding для создания отступа и отрицательный margin , чтобы этот же отступ убрать, а точнее — сделать его незаметным для пользователей.

Обратите внимание, что внутренные отступы padding тоже попадают под заливку, то есть, если у вашего элемента будет фон, то он скорее всего наедет на контент перед ним. Для того, чтобы игнорировать padding при добавлении фона на элемент, используйте CSS-свойство background-clip:content-box .

Поддержка браузерами: Chrome конечно же, Firefox 4.0+, Opera 10.6+, Safari 3+.

Замечания:

• Необходима поддержка браузером background-clip:content-box , но это только в том случае, если вы хотите добавить фон элементу.
• Некоторые ограничения при использовании margin (в том числе при margin-collapse — это когда из нижнего отступа первого элемента и верхнего отступа второго определяется наибольший, который и становится величиной отступа между этими элементами).
• Невозможность использования padding-top .

#link-C { padding-top: 55px; margin-top: -55px; -webkit-background-clip: content-box; background-clip: content-box; }

Г: Border и отрицательный margin

По сути то же самое, что и предыдущий метод, но вместо padding используем border . Что это нам даёт?

• Теперь вы спокойно можете использовать внутренние отступы padding .
• Постараюсь выразиться правильно — по идее border — это тот же padding , но только с заливкой и эффектами. Поэтому при использовании фона или заливки элемента нам нужно учесть, чтобы она распростаранялась на сам элемент и на padding , но не на border (ведь он то у нас прозрачный), здесь поможет background-clip:padding-box .
• Ограничение в использовании border-top , которое однако легко решаемо — смотрите ниже.

Поддержка браузерами: Chrome конечно же, Firefox 1.0+, Opera 10.5+, Safari 3+.

#link-D { border-top: 55px solid transparent; margin-top: -55px; padding: 15px; /* паддинги - без проблем */ -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box; }

Д: Метод Г с возможностью добавления border-top

Дополнение к предыдущему методу, которое позволит добавить на элемент верхний border . Поддержка браузерами псевдоэлементов и background-clip (только при наличии фона или заливки) обязательна.

Поддержка браузерами: Chrome конечно же, Firefox 3.5+, Opera 10.5+, Safari 3+.

#link-E { position: relative; /* важно - для того, чтобы псевдоэлемент позиционировался относительно этого элемента */ border-top: 55px solid transparent; margin-top: -55px; -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box; } #link-E:before { content: ""; position: absolute; top: -2px; /* равен по модулю толщине border */ left: 0; right: 0; border-top: 2px solid #ccc; /* собственно то, ради чего всё затевалось */ }

Источник