На некоторых моих сайтах используется верхний блок с CSS-свойством position: fixed. И возникала одна неприятная проблема, если создавать якоря для перехода на какую-то часть страницы типа <a href="#my_lovely_cat">Мой любимый котик</a>. Если щёлкнуть по такой ссылке, то заголовок, на который ссылается якорь, не виден - он уходит за статичный верхний блок.
В качестве примера создадим заголовок и присвоим ему идентификатор. Попробуйте щёлкнуть по ссылке, чтобы увидеть проблему.
Я думал, что нормального решения проблемы не существует, а придумывать какие-то хаки не хотелось. До поры до времени не обращал внимания. Но оказывается, в CSS есть удобное свойство scroll-margin-top, которое и помогает просто и изящно решить проблему.
Прописываем CSS-стиль у нужного элемента. Например, испытаем свойство на заголовке третьего уровня.
h3 {
scroll-margin-top: 50px; /* любое значение для отступа от фиксированного заголовка */
}
Создадим ссылку на заголовок.
Теперь вы можете не беспокоиться, что пользователь не увидит ваши заголовки!
Далее идёт текст, чтобы на странице появилась прокрутка.
Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты. Решила, деревни, по всей сбить ipsum рыбными своего запятой страну. Что одна свой грамматики не свое рыбными даль? Речью повстречался приставка своего свою ручеек деревни свое сих там. Коварный, встретил, власти, себя то своих бросил предупреждал имеет скатился необходимыми текстов напоивший страна алфавит ipsum снова океана злых родного! Заманивший, рекламных наш алфавит путь своего эта речью скатился о текст. Осталось, рукописи, lorem путь семь знаках грамматики над ipsum наш парадигматическая коварных напоивший единственное до за возвращайся города щеке меня она если обеспечивает снова маленькая назад пор имеет курсивных безопасную толку даже своего власти даль но! Предупреждал, не, запятой строчка щеке это страна страну ты ipsum оксмокс она ее которой пунктуация языкового бросил родного раз первую меня рыбного несколько большой продолжил свой которое злых живет от всех над текст единственное большого свой своих мир переулка курсивных точках. Обеспечивает, алфавит точках инициал проектах большого силуэт вскоре. Они, рекламных послушавшись которое букв все продолжил страна сих города рыбного семь рукопись точках вопрос вдали. Рыбными, языком, возвращайся, мир одна предупредила снова всемогущая даже взобравшись собрал власти пунктуация маленький толку рот все бросил которое меня грамматики пустился журчит строчка живет взгляд пор ее ты своих вопрос не ipsum страна свой переписывается? Буквоград, злых образ несколько большого великий подзаголовок пустился меня силуэт диких океана? Решила, пунктуация приставка лучше запятых рукопись! Имеет, они, вопрос послушавшись мир за снова ipsum безопасную он ведущими использовало там власти которой деревни всеми маленькая текстов не возвращайся своих курсивных точках дорогу над ее! Она?
Lorem ipsum dolor sit amet, consectetur adipisicing elit. At, assumenda ex magni doloremque sunt excepturi adipisci officia. Quae, dolores, ex magni fugit animi similique aperiam modi dolorem voluptas suscipit deserunt nihil aut quis officia voluptates tenetur vel doloribus hic libero earum minus delectus quibusdam explicabo ratione minima reiciendis exercitationem consequatur assumenda totam voluptatem. Eligendi, ullam, nulla, vel vitae ipsam facilis perspiciatis unde sequi harum iste ad hic cum aspernatur? Nisi, porro, quaerat, iure inventore vel vero doloribus magnam voluptates aspernatur sint explicabo quam provident repellendus aperiam voluptatum sapiente rem asperiores distinctio dicta voluptate illum sequi maxime laudantium dignissimos harum consequatur nostrum enim expedita ea a. Blanditiis, repellendus, corporis, error, esse fugit doloremque consequuntur tenetur ipsam sapiente velit quis aut explicabo expedita perferendis sit fuga pariatur sunt deleniti odit autem perspiciatis facilis eum magni ullam quasi aspernatur facere eos? A nulla delectus eligendi impedit ex explicabo fuga provident! Quasi, praesentium quis facilis dolorum nostrum consectetur ea dolor soluta ipsa voluptatibus. Maiores culpa odit saepe voluptatem quibusdam. Debitis natus nihil mollitia vero! Quasi, ex, amet, architecto doloribus ratione laborum enim sint facilis veniam ducimus maiores unde temporibus aperiam velit sequi voluptas excepturi fugiat sit consequuntur quisquam nam qui aliquid nostrum repudiandae ea eveniet magni voluptatem nemo asperiores animi ut tenetur ipsum dolores ad aliquam obcaecati dolore rerum pariatur saepe cumque fuga laudantium nisi incidunt blanditiis ab inventore. Obcaecati, commodi qui sed repellendus maiores dignissimos deleniti esse blanditiis iusto veniam at assumenda eaque quo quas corrupti placeat tempora? Eos, quia consectetur nostrum error fugiat vel deserunt? Ad expedita sit possimus fugit officiis! Dignissimos, explicabo, ea, perferendis, minima quos repudiandae delectus vitae accusantium cupiditate totam officiis soluta praesentium illo expedita quisquam pariatur ipsum nobis deleniti ad corrupti fuga eius laborum magni. Placeat, voluptatum debitis sapiente deserunt assumenda recusandae eaque non at repellat similique dolorem!