Как выровнять анимацию меню?

Question

[hsnz]

Ребята, помогите пожалуйста.
Ситуация следующая, есть меню на Landing Page, в нем есть список "О компании т .д." ссылки забиты на анкоры, а блокам дал свойства id. Тем самым когда нажимаю в нем на ссылку меню и меню перекатывается к блоку, но мне надо так, чтобы меню не закрывало часть блока при переходе.
Ситуацию решал с помощью свойства section-padding, но это не лучший вариант.

Вот сайт: revery.ru/test

Comments

[Ankhena]

Переставьте якоря выше.
Или прибавляете высоту меню к ScrollTop на JS.

[hsnz]

Ankhena W: как бы это реализовать? Можно подробнее пожалуйста.

[Ankhena]

hsnz: Как сделать плавную прокрутку страницы до якоря? Только вам надо прибавить еще высоту меню

[hsnz]

Ankhena W: а как переставить якоря выше?
А то c js у меня совсем худо.

[Ankhena]

hsnz: js там не при чем.

У section у вас написаны верхние и нижние padding. Увеличьте верхний, так чтобы помещалось меню, на эту же величину уменьшите нижний.

[hsnz]

Ankhena W: не получается у меня, можно дословно пожалуйста.

[Ankhena]

hsnz:
На примере Продукции

Первый вариант на CSS:

Есть у вас блок

<section id="product" class="section-padding wow fadeInUp delay-01s animated" ...>

.
Соответственно при переходе к якорю верхяя граница этого блока оказывается у верха окна браузера.

Визуально, этот блок практически слеплен с предыдущим, по крайней мере на большом экране.
Так что мешает добавить для него верхний padding равный высоте меню?

Второй вариант на JS:
Раз уж все равно есть скрипт плавной прокрутки от ScrollTop отнять эти 77точек меню (Или соответственно для разных размеров экрана. Можно прямо вс крипте спросить текущую высоту меню $(ваш_селектор).height() ).

[hsnz]

Ankhena W: Спасибо за ответ, суть в том, что я могу задать тот же padding на определенную высоту, чтобы меню прокручивалось ровно, но этот вариант меня не устраивает, так как будет большой отступ от блоков.
Насчет js, сейчас попробую.

[Ankhena]

hsnz: Дело, конечно, вашего дизайнера, но по-моему блоки просто слиплись.
Посмотрите картинку: