Как управлять переходом на закладку внутри страницы

Question

Я пытаюсь получить страницу с определенным количеством div, у каждого из которых есть закладка (имя).Проблема в том, что, когда я перехожу к одной из закладок, часть текста исчезает из-за дизайна.Я хотел бы знать, есть ли способ изменить поведение закладки, чтобы он не устанавливал начало ее в верхней части страницы, а устанавливал количество пикселей ниже.

страница доступна здесь: не в сети, извините.

Поведение происходит, когда вы переходите к любой из закладок (кроме # 6, потому что документ заканчивается там), как здесь: не в сети, извините.

Может ли это быть решено с помощью свойства css или любым другим способом?(обновление) Я бы предпочел это, а не решение javascript, потому что я планирую использовать javascript для их вкладки и сохранять закладки в случае отключения javascript

Answer 1

Вы можете сделать это с помощью JavaScript, используя scrollBy. Поместите это в обработчик load или onload:

if(window.location.hash.length > 1) {
    window.scrollBy(0, -60); // Adjust to suit your needs.
}

Answer 2

Я получил ответ сам, так что это в основном для ссылок.

Чтобы игнорировать смещение 100px, вызванное заголовком, я добавил padding-top 100px к каждомуодин элемент div, а затем я изменил ссылки, чтобы перейти к элементам div вместо добавленных элементов a.Этот верхний слой в основном заставляет текст появляться там, где и должен, и, таким образом, решает мою проблему.

Answer 3

window.onhashchange = window.onload = function () {
     if( window.location.hash.length && window.scrollY > window.pageYOffset ) {
          window.scrollBy( 0, -100 ); // Scroll up 100 pixels on hash change
     };
};