Как сместить позицию скролла при переходе по ссылке?

Question

[Анатолий Запорожец]

На странице вверху есть header с position:fixed и высотой 80px
И есть несколько элементов с id. Например #portfolio, #service, #about-us

При переходе с другой страницы по ссылке index.php#portfolio видим следующее:
Позиция скроллинга перемещена на нужный элемент, но он закрывается фиксированным хэдером как раз на 80px. Как сделать так, чтобы при переходе блок оказывался на 80px ниже, и не закрывался хэдером.

Comments

[Exploding]

Как говорится: "Лучше 1 раз увидеть, чем не увидеть ни разу"))

[Анатолий Запорожец]

Должно быть так.


Но получается так:

[Kovalsky]

Анатолий Запорожец, при инициализации страницы скролльте страницу к положению на 80 пикселей выше элемента ID которого указан в ссылке. Вроде достаточно просто.

[Анатолий Запорожец]

Никита Полевой, JS-ом?

[Анатолий Запорожец]

Никита Полевой, А если в каждый контейнер запихать якорь без размеров и смещать его margin-ом на 80px вверх, и ссылаться на него, а не на контейнер, это совсем наркомания?

[Kovalsky]

Анатолий Запорожец, ну да. Если у вас прямо совсем-совсем фиксированная высота хедера, то иногда для каждого якорного элемента создают спрятанный блок, который имеет ID этого элемента и нужный отступ,.

[Kovalsky]

Анатолий Запорожец, об этом я и писал в предыдущем комментарии. Ну я видел что так делают, но не могу сказать какие проблемы могут быть с этим связаны, не пользовался.

[Анатолий Запорожец]

Никита Полевой, Хорошо, спасибо.

Answer 1

[Dmitry Sokolov]

если не заморачиваться со скриптом, то в каждой секции повесить элемент с position:absolute; top: 80px и на ссылку вешать якорь не index.php#portfolio, а уже index.php#portfolio__scroll Например )