Если у меня есть HTML-страница без прокрутки, прикрепленная к вершине с определенной высотой:
Есть ли способ использовать привязку URL ( #fragment
часть), чтобы браузер прокручивал до определенной точки на странице, но все же учитывал высоту фиксированного элемента без помощи JavaScript ?
http://foo.com/#bar
НЕПРАВИЛЬНО (но обычное поведение): ПРАВИЛЬНО: + --------------------------------- + + -------------- ------------------- + | БАР ///////////////////// header | | //////////////////////// header | + --------------------------------- + + -------------- ------------------- + | Вот остальная часть текста | | БАР | | ... | | | | ... | | Вот остальная часть текста | | ... | | ... | + --------------------------------- + + -------------- ------------------- +
.dislocate50px, #bar { padding: 50px 0 0; margin: -50px 0 0; -webkit-background-clip: content-box; background-clip: content-box; }
scroll-padding-top
здесь: css-tricks.com/… Соответствующий ответ: stackoverflow.com/a/56467997/247696Ответы:
У меня такая же проблема. Я решил это, добавив класс к элементу привязки с высотой верхней панели в качестве значения padding-top.
А потом просто CSS:
источник
margin-top: -90px;
чтобы противостоять пробелу, создаваемому заполнением..anchor:target {padding-top: 90px;}
так, чтобы он добавлял отступ, только когда они использовали тег привязки. Таким образом, не всегда есть куча отступов, если страница загружается сверху. Только когда он загружает эту конкретную точку ниже на странице.Если вы не можете или не хотите устанавливать новый класс, добавьте псевдоэлемент фиксированной высоты
::before
в:target
псевдокласс в CSS:Или прокрутите страницу относительно с
:target
помощью jQuery:источник
:target
был просто великолепен!Я использую этот подход:
Он добавляет невидимый элемент перед каждой целью. Работает IE8 +.
Вот другие решения: http://nicolasgallagher.com/jump-links-and-viewport-positioning/
источник
Официальный ответ Bootstrap принят:
кредиты
Объединить
источник
display: flex;
илиpadding-top
. В<a name="my_link">{leave this empty}</a>
этих случаях используйте выделенный элемент привязки (например ).от: https://css-tricks.com/fixed-headers-on-page-links-and-overlapping-content-oh-my/
источник
Лучший способ, который я нашел, чтобы решить эту проблему (заменить 65px с фиксированной высотой элемента):
Если вам не нравится использовать целевой селектор, вы также можете сделать это следующим образом:
Примечание: этот пример не будет работать, если целевой элемент имеет цвет фона, который отличается от его родителя. например:
в этом случае зеленый цвет элемента my-target перезапишет его родительский красный элемент в 65px. Я не нашел ни одного чистого CSS-решения для решения этой проблемы, но если у вас нет другого цвета фона, это решение будет лучшим.
источник
В то время как некоторые из предложенных решений работать на фрагментарных ссылок (= хеш - ссылки) в пределах одной и той же странице (как ссылка меню , который прокручивает вниз), я обнаружил , что ни один из них не работал в текущей Chrome , если вы хотите использовать фрагмент ссылки поступают от других страницы .
Поэтому вызов www.mydomain.com/page.html#foo с нуля НЕ сместит вашу цель в текущем Chrome ни с одним из указанных CSS-решений или JS-решений.
Есть также отчет об ошибке jQuery, описывающий некоторые детали проблемы.
РЕШЕНИЕ
Единственный найденный мной вариант, который действительно работает в Chrome, - это JavaScript, который не вызывается onDomReady, но с задержкой.
РЕЗЮМЕ
Без задержки JS решения, вероятно, будут работать в Firefox, IE, Safari, но не в Chrome.
источник
Когда в игру вступает спецификация CSS Scroll Snap , это легко сделать с помощью
scroll-margin-top
свойства. В настоящее время работает на Chrome и Opera (апрель 2019). Также Safari 11+ должен поддерживать это, но я не смог запустить его на Safari 11. Вероятно, нам нужно подождать, пока парни не исправят это.Пример Codepen
источник
scroll-padding-top
иscroll-margin-top
?scroll-margin-top
для этого вариантаscroll-snap-margin-top
: caniuse.com/#search=scroll-margin-topДля Chrome / Safari / Firefox вы можете добавить
display: block
и использовать отрицательное поле для компенсации смещения, например:Смотрите пример http://codepen.io/swed/pen/RrZBJo
источник
Вы можете сделать это с помощью jQuery:
источник
Просто обнаружил еще одно чистое CSS-решение, которое для меня сработало!
Нашел на этом сайте !
источник
Вы можете попробовать это:
Установите верхнее значение отступа к фактической высоте вашего заголовка. Это создаст небольшой дополнительный пробел в верхней части заголовка, но он будет виден только тогда, когда пользователь переходит на якорь и затем прокручивается вверх. Я разработал это решение для своего сайта прямо сейчас, но он показывает только небольшую фиксированную полосу в верхней части страницы, ничего слишком высокого.
источник
Я легко работал с CSS и HTML, используя метод «anchor: before», упомянутый выше. Я думаю, что это работает лучше всего, потому что это не создает массового заполнения между вашими div.
Похоже, что это не работает для первого div на странице, но вы можете противостоять этому, добавив отступ к этому первому div.
Вот рабочая скрипка: http://jsfiddle.net/FRpHE/24/
источник
Меня устраивает:
HTML-ссылка на якорь:
Якорь HTML:
CSS:
источник
Мне не повезло с ответом, перечисленным выше, и я решил использовать это решение, которое отлично сработало ...
Создайте пустой промежуток, где вы хотите установить свой якорь.
И применить следующий класс:
Это решение будет работать, даже если разделы имеют разноцветный фон! Я нашел решение по этой ссылке.
источник
Я использую ответ @ Jpsy, но из соображений производительности я устанавливаю таймер только в том случае, если в URL присутствует хеш.
источник
У меня было много проблем со многими ответами здесь и в других местах, так как якорями, отмеченными закладками, были заголовки разделов на странице часто задаваемых вопросов, поэтому смещение заголовка не помогло, так как остальная часть контента просто осталась бы на своем месте. Так что я думал, что отправлю.
То, что я закончил, было составом из нескольких решений:
CSS:
Где "120px" - это ваша фиксированная высота заголовка (возможно, плюс некоторое поле).
Ссылка на закладку HTML:
Содержимое закладок HTML:
Хорошая вещь в этом решении заключается в том, что
span
элемент не только скрыт, он по существу свернут и не дополняет ваш контент.Я не могу много доверять этому решению, так как оно исходит от множества различных ресурсов, но в моей ситуации оно сработало лучше всего.
Вы можете увидеть фактический результат здесь .
источник
<span>
с якорем в промежутке, наряду с добавлением в padding и margin работал для меня. Большое спасибо, что нашли время, чтобы представить этот ответ, несмотря на возраст темы!Мне кажется, что это немного странно, но в качестве решения только для css вы можете добавить заполнение к активному привязанному элементу, используя
:target
селектор:источник
Я нашел , что я должен был использовать как MutttenXd «s и Badabam » CSS решения s вместе, как первый не работает в Chrome и второй не работает в Firefox:
источник
Путь, который я считаю самым чистым, следующий:
источник
Минимально навязчивый подход с использованием jQuery:
Ссылка на сайт:
Содержание:
Автор сценария:
При назначении ссылочного класса якорной ссылки поведение других ссылок (например, аккордеона или элементов управления вкладками) не изменяется.
Вопрос не нуждается в javascript, но другой более популярный вопрос закрыт из-за этого, и я не смог ответить на него.
источник
Мне нужно что-то, что работает для входящих ссылок, ссылок на странице и на что может ориентироваться JS, чтобы страница могла реагировать на изменения высоты заголовка
HTML
CSS
z-index: -1
Позволяет ссылки в «области отступа» выше фрагмент-мишени до сих пор быть интерактивными, так прокомментировало @MuttenXd своего ответаЯ еще не нашел проблему в IE 11, Edge 15+, Chrome 38+, FF 52+ или Safari 9.1+
источник
Этот код должен сделать свое дело. Поменяйте 45px на высоту панели заголовка.
РЕДАКТИРОВАТЬ: Если использование jQuery является опцией, я также успешно использовал jQuery.localScroll с установленным значением смещения. Параметр смещения является частью jQuery.scrollTo, на котором построен jQuery.localScroll. Демонстрация доступна здесь: http://demos.flesler.com/jquery/scrollTo/ (второе окно, под «смещением»)
источник
Вот полное решение jquery, которое будет работать в IE:
Предположим, что элементы панели навигации выглядят примерно так:
Вы можете использовать следующий фрагмент jquery для смещения прокрутки:
источник
Реализация с использованием
:before
работала отлично, пока мы не поняли, что псевдоэлемент фактически покрывал и блокировал события указателя, которые находились в области псевдоэлемента. Использование чего-либо вроде «pointer-events: none
на»:before
или даже непосредственно на якоре никак не повлияло.В итоге мы сделали абсолютное позиционирование якоря, а затем скорректировали его положение, чтобы оно было смещением / высотой фиксированной области.
Смещение привязки без блокирования событий указателя
Значение этого заключается в том, что мы не блокируем элементы, которые могут попасть в эти 300 пикселей. Недостатком является то, что при получении позиции этого элемента из Javascript необходимо учитывать это смещение, поэтому любая логика должна быть скорректирована.
источник
Вот так я и получил, чтобы наконец перейти в нужное место при нажатии на навигацию. Я добавил обработчик событий для навигационных кликов. Тогда вы можете просто использовать «scrollBy» для перемещения вверх по смещению.
источник
Я создал div с несколькими переносами строк и дал идентификатор, а затем поместил код, который хотел показать ниже. Затем ссылка приведет вас к месту над изображением, и заголовок больше не будет мешать:
Конечно, вы можете изменить количество разрывов строк в соответствии с вашими потребностями. Это отлично сработало для меня, но я не уверен, что есть какие-то проблемы, но я все еще изучаю HTML.
источник
<br>
тегов перед каждым заголовком.Использовал этот скрипт
источник
Я думаю, что этот подход более полезен:
<h2 id="bar" title="Bar">Bar</h2>
источник
Теперь вы можете использовать scroll-margin-top , который довольно широко используется .
Просто добавьте следующий CSS к элементу, к которому вы хотите перейти:
источник
scroll-margin-top
было предложено ранее в этой теме