Переход к другой части той же странице с запасом

Question

Я использую этот код, чтобы перейти к различным разделам this page

<span id="section1"> 
<a href="#section1"></a> 

В основном, когда вы нажмете на ссылку, он переводится в этот раздел, но мой плавающими навигационная система блокирует заголовки. Как сделать страницу «прыгать» на «section1», но с 50 полями?

EDIT: Это приемлемые решения, но я забыл упомянуть, что для создания этих ссылок я использую подключаемый модуль «Table of Contents Plus». Я не разбираюсь в javascript и должен знать, что нужно изменить в подключаемом коде, чтобы добавить эти решения.

Answer 1

Я использовал вашу конкретную страницу и this answer, чтобы придумать достойное решение. <span>, который на самом деле имеет идентификатор привязки, должен иметь стиль position: relative; top: -100px, а внутренний <strong>, который имеет фактический текст, должен быть position: relative; top: 100px. Это приводит к тому, что текст появляется там, где он обычно, но вызывает привязку ссылки для отправки вам немного выше текста. Вы можете играть с точными числами, пока они не будут выглядеть точно так, как вам нравится.

Answer 2

section1:target {margin-top: 50px} 

:target псевдо-класс применяется свойства, когда у вас есть идентификатор в URL.