Исправлено перекрытие заголовка страницы внутри якоря страницы

Question

Если на HTML-странице есть заголовок без прокрутки, прикрепленный к вершине с определенной высотой:

Есть ли способ использовать привязку URL (часть #fragment), чтобы браузер прокручивал до определенной точки на странице, но при этом учитывал высоту фиксированного элемента без помощи JavaScript ?

http://foo.com/#bar

WRONG (but the common behavior):         CORRECT:
+---------------------------------+      +---------------------------------+
| BAR///////////////////// header |      | //////////////////////// header |
+---------------------------------+      +---------------------------------+
| Here is the rest of the Text    |      | BAR                             |
| ...                             |      |                                 |
| ...                             |      | Here is the rest of the Text    |
| ...                             |      | ...                             |
+---------------------------------+      +---------------------------------+

Answer 1

Я легко могу работать с CSS и HTML, используя метод «anchor: before», упомянутый выше. Я думаю, что это работает лучше всего, потому что это не создает массового заполнения между вашими div.

.anchor:before {
  content:"";
  display:block;
  height:60px; /* fixed header height*/
  margin:-60px 0 0; /* negative fixed header height */
}

Похоже, это не работает для первого div на странице, но вы можете противостоять этому, добавив отступ к этому первому div.

#anchor-one{padding-top: 60px;}

Вот рабочая скрипка: http://jsfiddle.net/FRpHE/24/

Answer 2

Я обнаружил, что должен был использовать оба MutttenXd и Badabam решения CSS вместе, так как первое не работало в Chrome, а второе не работал в Firefox:

a.anchor { 
  padding-top: 90px;
}

a.anchor:before { 
  display: block;
  content: "";
  height: 90px;
  margin-top: -90px;
}

<a class="anchor" name="shipping"></a><h2>Shipping (United States)</h2>
...

Answer 3

То, что я считаю самым чистым, таково:

  #bar::before {
    display: block;
    content: " ";
    margin-top: -150px;
    height: 150px;
    visibility: hidden;
    pointer-events: none;
  }

Answer 4

Я использую ответ @ Jpsy, но по соображениям производительности я устанавливаю таймер только в том случае, если в URL-адресе присутствует хэш.

$(function() {
      // Only set the timer if you have a hash
      if(window.location.hash) {
        setTimeout(delayedFragmentTargetOffset, 500);
      }
  });

function delayedFragmentTargetOffset(){
      var offset = $(':target').offset();
      if(offset){
          var scrollto = offset.top - 80; // minus fixed header height
          $('html, body').animate({scrollTop:scrollto}, 0);
          $(':target').highlight();
      }
  };

Answer 5

Мне немного пугающе, но в качестве решения только для css вы можете добавить заполнение к активному привязанному элементу с помощью селектора :target:

html, body {height:100%; min-height:100%; margin:0;}
body {min-height:200%;}
header {display:inline-block; position:fixed; font-size:1.5em; height:100px; top:0; left:0; right:0; line-height:100px; background:black; text-align:center;}
header a {color:#fff;}
section {padding:30px; margin:20px;}
section:first-of-type, section:target {padding-top:130px;}

<header><a href="#one">#One</a> <a href="#two">#two</a> <a href="#three">#three</a></header>
<section id="one"><h1>One</h1>Aenean lacinia bibendum nulla sed consectetur. Nullam id dolor id nibh ultricies vehicula ut id elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.</section>
<section id="two"><h1>Two</h1>Aenean lacinia bibendum nulla sed consectetur. Nullam id dolor id nibh ultricies vehicula ut id elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.</section>
<section id="three"><h1>Three</h1>Aenean lacinia bibendum nulla sed consectetur. Nullam id dolor id nibh ultricies vehicula ut id elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.</section>

Answer 6

html {
  scroll-padding-top: 70px; /* height of sticky header */
}

от: https://css -tricks.com / fixed-headers-on-page-links-and-overlapping-content-oh-my /

Answer 7

У меня были большие проблемы со многими ответами здесь и в других местах, так как якорями, отмеченными закладками, были заголовки разделов на странице часто задаваемых вопросов, поэтому смещение заголовка не помогло, так как остальная часть контента просто осталась бы на своем месте. Так что я решил опубликовать.

То, что я закончил, было составом из нескольких решений:

1. CSS:

   .bookmark {
       margin-top:-120px;
       padding-bottom:120px; 
       display:block;
   }
   

Где "120px" - это ваша фиксированная высота заголовка (возможно, плюс некоторое поле).

2. Ссылка на закладку HTML:

   <a href="#01">What is your FAQ question again?</a>
   

3. Содержимое закладки HTML:

   <span class="bookmark" id="01"></span>
   <h3>What is your FAQ question again?</h3>
   <p>Some FAQ text, followed by ...</p>
   <p>... some more FAQ text, etc ...</p>
   

Хорошая особенность этого решения в том, что элемент span не только скрыт, он по существу свернут и не дополняет ваш контент.

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

Вы можете увидеть фактический результат здесь .

Answer 8

Минимально навязчивый подход с использованием jQuery:

Ссылка:

<a href="#my-anchor-1" class="anchor-link">Go To Anchor 1</a>

Содержание:

<h3 id="my-anchor-1">Here is Anchor 1</a>

Сценарий:

$(".anchor-link").click(function() {
    var headerHeight = 120;
    $('html, body').stop(true, true).animate({
        scrollTop: $(this.hash).offset().top - headerHeight
    }, 750);
    return false;
});

При назначении ссылкам класса якорных ссылок на поведение других ссылок (например, элементов аккордеона или вкладок) это не влияет.

Вопрос не требует javascript, но другой более популярный вопрос закрыт из-за этого, и я не смог ответить на него.

Answer 9

Мне не повезло с ответом, перечисленным выше, и в итоге я воспользовался этим решением, которое отлично сработало ...

Создайте пустой интервал, в котором вы хотите установить привязку.

<span class="anchor" id="section1"></span>
<div class="section"></div>

И примените следующий класс:

.anchor {
  display: block;
  height: 115px;       /* same height as header */
  margin-top: -115px;  /* same height as header */
  visibility: hidden;
}

Это решение будет работать, даже если секции имеют разноцветный фон!Я нашел решение на этой ссылке.

Answer 10

Мне нужно что-то, что работает для входящих ссылок, ссылок на странице и на что может ориентироваться JS, чтобы страница могла реагировать на изменения высоты заголовка

HTML

<ul>
  <li><a href="#ft_who">Who?</a></li>
  <li><a href="#ft_what">What?</a></li>
  <li><a href="#ft_when">When?</a></li>
</ul>
...
<h2 id="ft_who" class="fragment-target">Who?</h2> 
...
<a href="#">Can I be clicked?</a>
<h2 id="ft_what" class="fragment-target">What?</h2>
...
<h2 id="ft_when" class="fragment-target">When?</h2> 

CSS

.fragment-target {
    display: block;
    margin-top: -HEADER_HEIGHTpx;
    padding-top: HEADER_HEIGHTpx;
    z-index: -1;
}

z-index: -1 позволяет ссылкам в «области заполнения» над целевым фрагментом по-прежнему нажиматься, как прокомментировал @MuttenXd в своем ответе

У меня нетобнаружил проблему еще в IE 11, Edge 15+, Chrome 38+, FF 52+ или Safari 9.1 +