it-swarm.com.ru

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

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

980
Matt Dryden

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

Дайте вашему якору класс:

<a class="anchor" id="top"></a>

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

a.anchor {
    display: block;
    position: relative;
    top: -250px;
    visibility: hidden;
}
1059
Jan

Я нашел это решение:

<a name="myanchor">
    <h1 style="padding-top: 40px; margin-top: -40px;">My anchor</h1>
</a>

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

305
Alexander Savin

Поскольку это проблема презентации, чистое решение 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'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);
152
Ian Clark

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

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

<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;}

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

139
Hrvoje Miljak

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

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

Чистое решение CSS, вдохновленное Александром Савиным:

a[name] {
  padding-top: 40px;
  margin-top: -40px;
  display: inline-block; /* required for webkit browsers */
}

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

  vertical-align: top;
81
Ziav

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

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

  1. Мои внутренние элементы имели хрупкую структуру CSS и реализовывали положение относительно/абсолютную игру, полностью разрушая дизайн страницы.
  2. 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;
      }
    }
});

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

30
Shouvik

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

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

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

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

Вы можете сделать это без JS и без изменения HTML. Это только для CSS.

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

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

26
Zsolt Szilagy

Как предполагает @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;
}
11
Kris Braun

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

9
odupont

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

HTML:

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

CSS:

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

Использовать этот:

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

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

9
user2475125

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

Я столкнулся с той же самой проблемой и закончил обрабатывать события щелчка вручную, как:

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

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

3
jean

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

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

3
Mottie

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

2
Mark Amery

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

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

Я сталкиваюсь с этой проблемой на веб-сайте 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.

1
lipsumar

Еще одно замечание от @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 с замиранием!

0
Dzseti

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

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

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

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

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

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

В CSS:

.vspace { height: 40px;}

Работает отлично, а пространство не задыхается.

0
Quentin

как насчет скрытых тегов 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

0
Pete

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

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

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

Работает идеально для меня.

0
Sanjo Elstak