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

Вы можете просто использовать 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>

Это не создает никакого пробела в содержании, а ссылки привязки действительно приятны.

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

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

<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 внутри моего тега в соответствующий id.

<h3><span id="one"></span>one</h3>

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

h3{ position:relative; }
h3 span{ position:absolute; top:-200px;}

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

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

С учетом этого я считаю, что использование 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 hash.
     */
    scrollToCurrent: function() {
      this.scrollIfAnchor(window.location.hash);
    },

    /**
     * If the click event 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;

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

*[id]:before { 
  display: block; 
  content: " "; 
  margin-top: -75px; 
  height: 75px; 
  visibility: hidden; 
}

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

• У моих внутренних элементов была хрупкая структура 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;
      }
    }
});

Смотрите живую реализацию здесь.

Это занимает много элементов из предыдущих ответов и объединяется в крошечную (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);

Углифицированная версия:

 !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);

Вы можете сделать это без js и без изменения html. Это только css.

a[id]:before {
    content:"";
    display:block;
    height:50px;
    margin:-30px 0 0;
}

Это добавит псевдоэлемент перед каждым a-тегом с идентификатором. Отрегулируйте значения в соответствии с высотой заголовка.

Для современных браузеров просто добавьте селектор CSS3: target на страницу. Это применимо ко всем якорям автоматически.

:target {
    display: block;    
    position: relative;     
    top: -100px;
    visibility: hidden;
}

Мое решение объединяет цель и перед селекторами для нашей CMS. Другие методы не учитывают текст в привязке. Отрегулируйте высоту и отрицательную маржу до необходимого вам смещения...

:target:before {
    content: "";
    display: inline-block;
    height: 180px;
    margin: -180px 0 0;
}

Решения с изменяющимся положением не всегда возможны (это может разрушить макет), поэтому я предлагаю следующее:

HTML:

<a id="top">Anchor</a>

CSS

#top {
    margin-top: -250px;
    padding-top: 250px;
}

Используйте это:

<a id="top">&nbsp;</a>

чтобы свести к минимуму перекрытие и установить размер шрифта в 1px. Пустой анкер не работает в некоторых браузерах.

Как указывает @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;
}

Для той же самой проблемы я использовал простое решение: поместите верхнюю часть 40px на каждый якорь.

Заимствуя часть кода из ответа, полученного по этой ссылке (автор не указан), вы можете включить хороший эффект сглаживания на якорь, в то время как заставляя его останавливаться на -60px выше якоря, хорошо помещая под фиксированной навигационной панелью бутстрапа (требуется 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(){
     });
});

Я столкнулся с этой проблемой и в итоге обработал события кликов вручную, например:

$('#mynav a').click(() ->
  $('html, body').animate({
      scrollTop: $($(this).attr('href')).offset().top - 40
  }, 200
  return false
)

Прокрутка анимации необязательна, конечно.

Это было вдохновлено ответом Шувика - тем же понятием, что и его, только размер фиксированного заголовка не жестко закодирован. Пока ваш фиксированный заголовок находится в первом заголовке node, это должно "просто работать"

/*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();
});

Вышеуказанные методы не очень хорошо работают, если ваш якорь является элементом таблицы или внутри таблицы (строки или ячейки).

Мне пришлось использовать javascript и привязать к событию окна hashchange, чтобы обойти это (demo):

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 недоступно во всех браузерах.

Я столкнулся с этой проблемой на веб-сайте TYPO3, где все "Content Elements" обернуты чем-то вроде:

<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.

Вместо того, чтобы иметь навигационную панель с фиксированной позицией, которая перекрывается остальной частью страницы (с прокручиваемым всем телом страницы), рассмотрите вместо этого наличие незапропускаемого тела со статическим навигатором и затем наличие страницы содержимое в прокручиваемом 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, а не по всей высоте страницы. Вы можете или не можете считать это желательным.

Здесь JSFiddle демонстрирует это в действии.

Здесь решение, которое мы используем на нашем сайте. Отрегулируйте переменную 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;
});

Еще один поворот к отличному ответу от @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 fading!

Вы можете достичь этого без ID с помощью селектора a[name]:not([href]) css. Это просто ищет ссылки с именем и без href, например. <a name="anc1"></a>

Примерное правило может быть:

a[name]:not([href]){
    display: block;    
    position: relative;     
    top: -100px;
    visibility: hidden;
}

Вы также можете добавить якорь с последующим attr:

(text-indent:-99999px;)
visibility: hidden;
position:absolute;
top:-80px;    

и предоставить родительскому контейнеру относительную позицию.

Прекрасно подходит для меня.

как насчет скрытых тегов span со связанными идентификаторами, которые обеспечивают высоту навигационной панели:

#head1 {
  padding-top: 60px;
  height: 0px;
  visibility: hidden;
}


<span class="head1">somecontent</span>
<h5 id="headline1">This Headline is not obscured</h5>

heres the скрипка: http://jsfiddle.net/N6f2f/7

Я добавил элемент 40px-height .vspace, удерживающий якорь перед каждым из моих элементов h1.

<div class="vspace" id="gherkin"></div>
<div class="page-header">
  <h1>Gherkin</h1>
</div>

В CSS:

.vspace { height: 40px;}

Он отлично работает, и пространство не забивается.

Добавляя к ответу Циава (спасибо Александру Савину), мне нужно использовать старую школу <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;
}

Решение @AlexanderSavin отлично работает в браузерах WebKit для меня.

Кроме того, мне пришлось использовать : target псевдокласс, который применяет стиль к выбранному якорю для настройки дополнения в FF, Opera и IE9:

a:target {
  padding-top: 40px
}

Обратите внимание, что этот стиль не для Chrome/Safari, поэтому вам, вероятно, придется использовать css-хаки, условные комментарии и т.д.

Также я хотел бы заметить, что решение Alexander работает из-за того, что целевой элемент inline. Если вам не нужна ссылка, вы можете просто изменить свойство display:

<div id="myanchor" style="display: inline">
   <h1 style="padding-top: 40px; margin-top: -40px;">My anchor</h1>
</div>