Как сделать запас места сверху для якорей?

Question

[Al Sm]

Здравствуйте.
Использую фиксированную шапку с меню и на странице также есть ссылки на якоря.
Но дело в том, что при переходе (прокрутке страницы) по ссылке на якорь, фиксированная шапка закрывает верх контента.
Как в таких случаях быть?

Answer 1

[Сергей Горячев]

$('.navigate a').bind("click", function(e) {
        var anchor = $(this);
        $('html, body').stop().animate({
            scrollTop: $(anchor.attr('href')).offset().top - 109
        }, 1000);
        e.preventDefault();
    });

scrollTop: $(anchor.attr('href')).offset().top - 109 // высота шапки
Если высота не фиксированная, считайте через jQuery и подставляйте.
https://jsfiddle.net/webirus/q43x4m93/

Comments

[Al Sm]

Что то не работает у меня ваш способ, что то я делаю не так. Добавил ваш скрипт на страницу, подключил jquery. Я так понимаю нужно добавить класс .navigate, но куда? Имею хтмл такого рода:
[HTML]
< a href="#a1">Вопрос?
< a id="a1">Ответ
[/html]

[Сергей Горячев]

Александр Петров: https://jsfiddle.net/webirus/q43x4m93/

[Al Sm]

Sergey Goryachev: Сергей, спасибо вам огромное, за потраченное время! :)

Answer 2

[Anna_BS]

Можно в контейнер, к которому нужен скролл, поместить абсолютом или отрицательным margin блок с якорем

Comments

[Сергей Горячев]

Тоже раньше так делал ))) Потом надоело )))

[Al Sm]

Спасибо Анна! А можно поподробнее? Я использую такую конструкцию:
[HTML]
< a href="#a1">Вопрос?< /a >
< a id="a1">Ответ< /a >
[/html]
Пробовал добавлять отрицательный маржин для "a id="a1"", но эффекта не было.

[Anna_BS]

Александр Петров: codepen.io/Anna_Batura/pen/gwyaPB

[Al Sm]

Anna_BS: Спасибо большое!

Answer 3

[Дмитрий Клусевич]

Можно добавить пусто div. И якорь на него кинуть, отрегулировать все отступами.