Как бороться с проблемой внутренней ссылки?

Question

[DrunkMaster]

Пример кода codepen.io/anon/pen/zNQZwN
Смысл: меню закреплено на странице. В первой строчке ссылка на якорь, переход-то правильно делается но меню закрывает подзаголовок к которому был сделан переход, посетитель теряется он думает что попал к подзаголовку 5 а не 4.
Что и как лучше сделать в этом случае?

Answer 1

[iBird Rose]

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

Answer 2

[IIIu6ko]

Пару строк на jquery решает проблему.

var $page = $('html, body');
$('a[href*="#"]').click(function() {
  $page.animate({
    scrollTop: $($.attr(this, 'href')).offset().top - 60
  }, 1000);
  return false;
});

codepen.io/anon/pen/KaLeKg

Answer 3

[Андрей Федоров]

для начала поменяйте местами якорь и заголовок:

<p><a name="z4"> </a><strong>Подзаголовок 4</strong></p>

потом вставьте куда-нибудь в конец css:

a:target {
  display: block;
  height: 70px;
  background-color: red;
}

изучите полученный эффект.

Comments

[DrunkMaster]

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