javascript - attribute - html атрибут title




компенсировать привязку html для настройки для фиксированного заголовка (19)

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


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

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

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


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

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

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

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

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

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

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

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

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

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

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

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


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

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

Добавляя к ответу Циава (спасибо Александру Савину), мне нужно использовать старую школу <a name="...">...</a> поскольку мы используем <div id="...">...</div> для другой цели в нашем коде. У меня были некоторые проблемы с display: inline-block используя display: inline-block - первая строка каждого элемента <p> оказалась слегка правой (как в браузерах Webkit, так и в Firefox). Я закончил тем, что пробовал другие display значения и display: table-caption отлично работает для меня.

.anchor {
  padding-top: 60px;
  margin-top: -60px;
  display: table-caption;
}

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

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

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

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

Кроме того, мне пришлось использовать : target- псевдокласс, который применяет стиль к выбранному якорю для настройки дополнения в 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>

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

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

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

  vertical-align: top;

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

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

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

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

В CSS:

.vspace { height: 40px;}

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


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

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

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


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

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

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


Я столкнулся с этой проблемой на веб-сайте 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;
}

Фиксированная верхняя панель высотой 40 пикселей, теперь анкеры снова работают и начинают 10px под верхней панелью.

Единственный недостаток этой техники - вы больше не можете использовать :target .


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





offset