Смещение html-якоря для корректировки на фиксированный заголовок
Я пытаюсь навести порядок в работе своих якорей. У меня есть заголовок, который зафиксирован в верхней части страницы, поэтому, когда вы ссылаетесь на якорь в другом месте страницы, страница переходит, так что якорь находится в верхней части страницы, оставляя содержимое за фиксированным заголовком (надеюсь, в этом есть смысл). Мне нужен способ сместить якорь на 25 пикселей от высоты заголовка. Я бы предпочел HTML или CSS, но Javascript также будет приемлемым.
28 ответов
Вы можете просто использовать CSS без JavaScript.
Дайте вашему якору класс:
<a class="anchor" id="top"></a>
Затем вы можете расположить привязку со смещением выше или ниже того места, где оно фактически отображается на странице, сделав его блок-элементом и установив его относительно. -250px установит якорь на 250px
a.anchor {
display: block;
position: relative;
top: -250px;
visibility: hidden;
}
Я нашел это решение:
<a name="myanchor">
<h1 style="padding-top: 40px; margin-top: -40px;">My anchor</h1>
</a>
Это не создает никаких пробелов в контенте, и якорные ссылки работают очень хорошо.
FWIW это сработало для меня:
*[id]:before {
display: block;
content: " ";
margin-top: -75px;
height: 75px;
visibility: hidden;
}
Я тоже искал решение этой проблемы. В моем случае это было довольно легко.
У меня есть список меню со всеми ссылками:
<ul>
<li><a href="#one">one</a></li>
<li><a href="#two">two</a></li>
<li><a href="#three">three</a></li>
<li><a href="#four">four</a></li>
</ul>
И ниже этого заголовки, куда он должен идти.
<h3>one</h3>
<p>text here</p>
<h3>two</h3>
<p>text here</p>
<h3>three</h3>
<p>text here</p>
<h3>four</h3>
<p>text here</p>
Теперь, потому что у меня есть фиксированное меню в верхней части моей страницы, я не могу просто заставить его перейти к моему тегу, потому что это будет за меню.
Вместо этого я поместил тег span внутри моего тега с правильным идентификатором.
<h3><span id="one"></span>one</h3>
Теперь используйте 2 строки CSS, чтобы правильно расположить их.
h3{ position:relative; }
h3 span{ position:absolute; top:-200px;}
Измените верхнее значение, чтобы соответствовать высоте вашего фиксированного заголовка (или больше). Теперь я предполагаю, что это будет работать и с другими элементами.
Поскольку это проблема презентации, чистое решение 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 {String} href
* @return {Boolean} - 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, вдохновленное Александром Савиным:
a[name] {
padding-top: 40px;
margin-top: -40px;
display: inline-block; /* required for webkit browsers */
}
При желании вы можете добавить следующее, если цель все еще находится за пределами экрана:
vertical-align: top;
Мое решение сочетает в себе цели и до селекторов для нашей CMS. Другие методы не учитывают текст в привязке. Отрегулируйте высоту и отрицательное поле до необходимого смещения...
:target:before {
content: "";
display: inline-block;
height: 180px;
margin: -180px 0 0;
}
Это берет много элементов из предыдущих ответов и объединяет в крошечную (уменьшенную на 194 байта) анонимную функцию jQuery. Отрегулируйте fixedElementHeight для высоты вашего меню или блокирующего элемента.
(function($, window) {
var adjustAnchor = function() {
var $anchor = $(':target'),
fixedElementHeight = 100;
if ($anchor.length > 0) {
$('html, body')
.stop()
.animate({
scrollTop: $anchor.offset().top - fixedElementHeight
}, 200);
}
};
$(window).on('hashchange load', function() {
adjustAnchor();
});
})(jQuery, window);
Если вам не нравится анимация, замените
$('html, body')
.stop()
.animate({
scrollTop: $anchor.offset().top - fixedElementHeight
}, 200);
с:
window.scrollTo(0, $anchor.offset().top - fixedElementHeight);
Uglified версия:
!function(o,n){var t=function(){var n=o(":target"),t=100;n.length>0&&o("html, body").stop().animate({scrollTop:n.offset().top-t},200)};o(n).on("hashchange load",function(){t()})}(jQuery,window);
Для современных браузеров просто добавьте селектор CSS3:target на страницу. Это будет применяться ко всем якорям автоматически.
:target {
display: block;
position: relative;
top: -100px;
visibility: hidden;
}
Вы можете сделать это без JS и без изменения HTML. Это только для CSS.
a[id]:before {
content:"";
display:block;
height:50px;
margin:-30px 0 0;
}
Это добавит псевдоэлемент перед каждым тегом a с идентификатором. Отрегулируйте значения в соответствии с высотой вашего заголовка.
Я столкнулся с подобной проблемой, к сожалению, после реализации всех решений, приведенных выше, я пришел к следующему выводу.
- Мои внутренние элементы имели хрупкую CSS-структуру и реализовывали позиционную относительную / абсолютную игру, полностью разрушая дизайн страницы.
- CSS не моя сильная сторона.
Я написал эту простую прокрутку js, которая учитывает смещение, вызванное заголовком, и переместил div примерно на 125 пикселей ниже. Пожалуйста, используйте его так, как считаете нужным.
HTML
<div id="#anchor"></div> <!-- #anchor here is the anchor tag which is on your URL -->
JavaScript
$(function() {
$('a[href*=#]:not([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) {
$('html,body').animate({
scrollTop: target.offset().top - 125 //offsets for fixed header
}, 1000);
return false;
}
}
});
//Executed on page load with URL containing an anchor tag.
if($(location.href.split("#")[1])) {
var target = $('#'+location.href.split("#")[1]);
if (target.length) {
$('html,body').animate({
scrollTop: target.offset().top - 125 //offset height of header here too.
}, 1000);
return false;
}
}
});
Смотрите живую реализацию здесь.
Для той же проблемы я использовал простое решение: на каждую якорь накладываем верхний слой в 40 пикселей.
Как предполагает @moeffju, этого можно достичь с помощью CSS. Проблема, с которой я столкнулся (которую я удивлен, что я не видел обсуждаемой) заключается в уловке наложения предыдущих элементов с отступами или прозрачной рамкой, предотвращающей действия при наведении и щелчке в нижней части этих разделов, потому что следующий пункт выше в г-го порядка.
Лучшее решение, которое я нашел, - поместить содержимое раздела в div это в z-index: 1:
// Apply to elements that serve as anchors
.offset-anchor {
border-top: 75px solid transparent;
margin: -75px 0 0;
-webkit-background-clip: padding-box;
-moz-background-clip: padding;
background-clip: padding-box;
}
// Because offset-anchor causes sections to overlap the bottom of previous ones,
// we need to put content higher so links aren't blocked by the transparent border.
.container {
position: relative;
z-index: 1;
}
Решения с изменением свойства позиции не всегда возможны (это может разрушить макет), поэтому я предлагаю следующее:
HTML:
<a id="top">Anchor</a>
CSS:
#top {
margin-top: -250px;
padding-top: 250px;
}
Использовать этот:
<a id="top"> </a>
чтобы минимизировать перекрытие, и установите размер шрифта в 1px. Пустой якорь не будет работать в некоторых браузерах.
Заимствуя часть кода из ответа, приведенного по этой ссылке (автор не указан), вы можете включить приятный эффект плавной прокрутки для привязки, в то время как он останавливается на -60px над привязкой, хорошо вписываясь под фиксированную навигацию начальной загрузки. bar (требуется jQuery):
$(".dropdown-menu a[href^='#']").on('click', function(e) {
// prevent default anchor click behavior
e.preventDefault();
// animate
$('html, body').animate({
scrollTop: $(this.hash).offset().top - 60
}, 300, function(){
});
});
Вместо того, чтобы иметь навигационную панель с фиксированным положением, которая перекрывается остальным содержимым страницы (с прокруткой всего тела страницы), вместо этого рассмотрите возможность иметь не прокручиваемое тело со статической навигационной панелью и затем иметь содержимое страницы в абсолютно позиционируемый прокручиваемый div ниже.
То есть иметь HTML, как это...
<div class="static-navbar">NAVBAR</div>
<div class="scrollable-content">
<p>Bla bla bla</p>
<p>Yadda yadda yadda</p>
<p>Mary had a little lamb</p>
<h2 id="stuff-i-want-to-link-to">Stuff</h2>
<p>More nonsense</p>
</div>
... и CSS, как это:
.static-navbar {
height: 100px;
}
.scrollable-content {
position: absolute;
top: 100px;
bottom: 0;
overflow-y: scroll;
width: 100%;
}
Это позволяет достичь желаемого результата простым, не хакерским способом. Единственное различие в поведении между этим и некоторыми из хитроумных хаков CSS, предложенных выше, заключается в том, что полоса прокрутки (в браузерах, которые ее отображают) будет прикреплена к содержимому div, а не ко всей высоте страницы. Вы можете или не можете считать это желательным.
Я столкнулся с той же самой проблемой и закончил обрабатывать события щелчка вручную, как:
$('#mynav a').click(() ->
$('html, body').animate({
scrollTop: $($(this).attr('href')).offset().top - 40
}, 200
return false
)
Прокрутка анимации необязательна, конечно.
Вышеуказанные методы не очень хорошо работают, если якорь является элементом таблицы или внутри таблицы (строки или ячейки).
Я должен был использовать JavaScript и привязать к окну hashchange Событие, чтобы обойти это ( демо):
function moveUnderNav() {
var $el, h = window.location.hash;
if (h) {
$el = $(h);
if ($el.length && $el.closest('table').length) {
$('body').scrollTop( $el.closest('table, tr').position().top - 26 );
}
}
}
$(window)
.load(function () {
moveUnderNav();
})
.on('hashchange', function () {
moveUnderNav();
});
* Примечание. Событие hashchange доступно не во всех браузерах.
Вы можете достичь этого без идентификатора, используя a[name]:not([href]) css селектор Это просто ищет ссылки с именем и без ссылки, например <a name="anc1"></a>
Примером правила может быть:
a[name]:not([href]){
display: block;
position: relative;
top: -100px;
visibility: hidden;
}
Это было вдохновлено ответом Шоувика - та же концепция, что и у него, только размер фиксированного заголовка не является жестко заданным. Пока ваш фиксированный заголовок находится в первом узле заголовка, это должно "просто работать"
/*jslint browser: true, plusplus: true, regexp: true */
function anchorScroll(fragment) {
"use strict";
var amount, ttarget;
amount = $('header').height();
ttarget = $('#' + fragment);
$('html,body').animate({ scrollTop: ttarget.offset().top - amount }, 250);
return false;
}
function outsideToHash() {
"use strict";
var fragment;
if (window.location.hash) {
fragment = window.location.hash.substring(1);
anchorScroll(fragment);
}
}
function insideToHash(nnode) {
"use strict";
var fragment;
fragment = $(nnode).attr('href').substring(1);
anchorScroll(fragment);
}
$(document).ready(function () {
"use strict";
$("a[href^='#']").bind('click', function () {insideToHash(this); });
outsideToHash();
});
Я сталкиваюсь с этой проблемой на веб-сайте TYPO3, где все "элементы контента" заключены в нечто вроде:
<div id="c1234" class="contentElement">...</div>
и я изменил рендеринг, так что он рендерит так:
<div id="c1234" class="anchor"></div>
<div class="contentElement">...</div>
И этот CSS:
.anchor{
position: relative;
top: -50px;
}
Фиксированная верхняя панель имеет высоту 40px, теперь якоря снова работают и начинают 10px под верхней панелью.
Единственным недостатком этой техники является то, что вы больше не можете использовать :target,
Еще одно замечание от @Jan - включить это в фиксированный заголовок #uberbar, который использует jQuery (или MooTools). ( http://davidwalsh.name/persistent-header-opacity)
Я настроил код так, чтобы верхняя часть контента всегда была ниже не под фиксированным заголовком, а также снова добавила якоря из @Jan, убедившись, что якоря всегда расположены под фиксированным заголовком.
CSS:
#uberbar {
border-bottom:1px solid #0000cc;
position:fixed;
top:0;
left:0;
z-index:2000;
width:100%;
}
a.anchor {
display: block;
position: relative;
visibility: hidden;
}
Подходит jQuery (включая настройки #uberbar и якоря:
<script type="text/javascript">
$(document).ready(function() {
(function() {
//settings
var fadeSpeed = 200, fadeTo = 0.85, topDistance = 30;
var topbarME = function() { $('#uberbar').fadeTo(fadeSpeed,1); }, topbarML = function() { $('#uberbar').fadeTo(fadeSpeed,fadeTo); };
var inside = false;
//do
$(window).scroll(function() {
position = $(window).scrollTop();
if(position > topDistance && !inside) {
//add events
topbarML();
$('#uberbar').bind('mouseenter',topbarME);
$('#uberbar').bind('mouseleave',topbarML);
inside = true;
}
else if (position < topDistance){
topbarME();
$('#uberbar').unbind('mouseenter',topbarME);
$('#uberbar').unbind('mouseleave',topbarML);
inside = false;
}
});
$('#content').css({'margin-top': $('#uberbar').outerHeight(true)});
$('a.anchor').css({'top': - $('#uberbar').outerHeight(true)});
})();
});
</script>
И, наконец, HTML:
<div id="uberbar">
<!--CONTENT OF FIXED HEADER-->
</div>
....
<div id="content">
<!--MAIN CONTENT-->
....
<a class="anchor" id="anchor1"></a>
....
<a class="anchor" id="anchor2"></a>
....
</div>
Может быть, это полезно для кого-то, кому нравится заголовок #uberbar с замиранием!
Добавляя к ответу Зиава (спасибо Александру Савину), мне нужно использовать старую школу <a name="...">...</a> как мы используем <div id="...">...</div> для другой цели в нашем коде. У меня были некоторые проблемы с отображением display: inline-block - первая строка каждого <p> Элемент оказался слегка правосторонним (в браузерах Webkit и Firefox). Я в конечном итоге пытался другой display ценности и display: table-caption отлично работает для меня
.anchor {
padding-top: 60px;
margin-top: -60px;
display: table-caption;
}
Вы также можете добавить якорь с помощью следующего атрибута:
(text-indent:-99999px;)
visibility: hidden;
position:absolute;
top:-80px;
и дать родительскому контейнеру относительную позицию.
Идеально подходит для меня.
Я добавил 40px-height .vspace элемент, удерживающий якорь перед каждым из моих h1 элементы.
<div class="vspace" id="gherkin"></div>
<div class="page-header">
<h1>Gherkin</h1>
</div>
В CSS:
.vspace { height: 40px;}
Работает отлично, а пространство не задыхается.
Как насчет скрытых тегов span со связанными идентификаторами, которые обеспечивают высоту панели навигации:
#head1 {
padding-top: 60px;
height: 0px;
visibility: hidden;
}
<span class="head1">somecontent</span>
<h5 id="headline1">This Headline is not obscured</h5>
вот скрипка: http://jsfiddle.net/N6f2f/7
Решение AlexanderSavin отлично работает в WebKit браузеры для меня.
Мне также пришлось использовать : целевой псевдокласс, который применяет стиль к выбранной привязке, чтобы настроить заполнение в FF, Opera & IE9:
a:target {
padding-top: 40px
}
Обратите внимание, что этот стиль не для Chrome / Safari так что вам, вероятно, придется использовать css-хаки, условные комментарии и т. д.
Также хотелось бы отметить, что решение Александра работает из-за того, что целевой элемент inline, Если вы не хотите ссылку, вы можете просто изменить display имущество:
<div id="myanchor" style="display: inline">
<h1 style="padding-top: 40px; margin-top: -40px;">My anchor</h1>
</div>
Вот решение, которое мы используем на нашем сайте. Настроить headerHeight переменная к вашей высоте заголовка. Добавить js-scroll Класс для привязки, которая должна прокручиваться при нажатии.
// SCROLL ON CLICK
// --------------------------------------------------------------------------
$('.js-scroll').click(function(){
var headerHeight = 60;
$('html, body').animate({
scrollTop: $( $.attr(this, 'href') ).offset().top - headerHeight
}, 500);
return false;
});