Гиперссылка и ID фрагмента Проблема вертикального смещения

Question

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

При использовании связывания фрагмента позиция прокрутки должна быть смещена на высоту полосы меню.Как это может быть достигнуто?

<a href="#fragment">Go to fragment</a>
<div id="fragment">...</div>

html { padding-top: 38px; } /* Offset page to allow for menu strip */
.menu-strip { position: fixed; top: 0; right: 0; left: 0; height: 38px; }

Есть ли простое изменение CSS, которое может быть сделано для достижения этой цели?

Иначе, есть ли общий способ сместить прокрутку на 200px, когда фрагментуказан?

Answer 1

То, что вы хотите сделать, это сделать вашу собственную хеш-ссылку. Хорошая идея - сгруппировать все ваши a, которые выполняют хеширование. Например

$(".ahashlink").click( function() {

    var location = $(this).attr("href");
    var offset = $(location).offset().top;
    $("body").scrollTop(offset+38);
    return false;
});

Это позволит прокрутить в нужное место ПЛЮС еще на 38 пикселей (высота верхней панели). Это, однако, не изменит ваш URL в вашем браузере, чтобы содержать правильный хэш. Это потому, что как только вы наберете window.location.hash = "#something", ваше окно автоматически перейдет к этому хешу. Так что имейте это в виду.

Answer 2

В этой старой статье есть решение только для HTML + CSS .

Основная идея заключается в использовании селектора : before css для вставки некоторого скрытого содержимого перед каждымсвязываемый элемент для их смещения:

<linked_elements>:before {
  display: block;
  content:" ";
  margin-top: -<offset>;
  height: <offset>;
  visibility: hidden;
}

Вот jsfiddle их демо .

Это также (я думаю) устранит необходимостьдля html { padding-top: 38px; }