Wenn ich in einer HTML-Seite einen nicht scrollenden Header habe, der oben fixiert ist und eine definierte Höhe hat:
Gibt es eine Möglichkeit, den URL-Anker (das #fragment
Teil) zu verwenden, um den Browser zu einem bestimmten Punkt auf der Seite zu scrollen, aber die Höhe des festen Elements ohne die Hilfe von JavaScript zu berücksichtigen ?
http://foo.com/#bar
FALSCH (aber das übliche Verhalten): RICHTIG: + --------------------------------- + + -------------- ------------------- + | BAR /////////////////////// header | | /////////////////////////// header | + --------------------------------- + + -------------- ------------------- + | Hier ist der Rest des Textes | | BAR | | ... | | | | ... | | Hier ist der Rest des Textes | | ... | | ... | + --------------------------------- + + -------------- ------------------- +
.dislocate50px, #bar { padding: 50px 0 0; margin: -50px 0 0; -webkit-background-clip: content-box; background-clip: content-box; }
scroll-padding-top
hier: css-tricks.com/… Entsprechende Antwort: stackoverflow.com/a/56467997/247696Antworten:
Ich hatte das gleiche Problem. Ich habe es gelöst, indem ich dem Ankerelement eine Klasse mit der Höhe der oberen Leiste als Füllwert hinzugefügt habe.
Und dann einfach das CSS:
quelle
margin-top: -90px;
, um der durch Polsterung entstandenen Lücke entgegenzuwirken..anchor:target {padding-top: 90px;}
so verwendet , dass es nur die Polsterung hinzufügte, wenn sie das Ankertag verwendeten. Auf diese Weise wird nicht immer viel aufgefüllt, wenn die Seite oben geladen wird. Nur wenn ein bestimmter Punkt auf der Seite geladen wird.Wenn Sie keine neue Klasse festlegen können oder möchten, fügen Sie
::before
der:target
Pseudoklasse in CSS ein Pseudoelement mit fester Höhe hinzu :Oder scrollen Sie
:target
mit jQuery relativ zu :quelle
:target
war einfach nur brillant!Ich benutze diesen Ansatz:
Vor jedem Ziel wird ein unsichtbares Element hinzugefügt. Es funktioniert IE8 +.
Hier sind weitere Lösungen: http://nicolasgallagher.com/jump-links-and-viewport-positioning/
quelle
Offizieller Bootstrap Angenommene Antwort:
Credits
Verschmelzen
quelle
display: flex;
oder verfügtpadding-top
. Verwenden Sie<a name="my_link">{leave this empty}</a>
in diesen Fällen ein spezielles Ankerelement (wie ).von: https://css-tricks.com/fixed-headers-on-page-links-and-overlapping-content-oh-my/
quelle
Der beste Weg, um dieses Problem zu lösen, ist (ersetzen Sie 65px durch Ihre feste Elementhöhe):
Wenn Sie nicht , wie das verwenden Zielwähler können Sie es auch auf diese Weise tun:
Hinweis: Dieses Beispiel funktioniert nicht, wenn das Zielelement eine von seinem übergeordneten Element abweichende Hintergrundfarbe aufweist. zum Beispiel:
In diesem Fall überschreibt die grüne Farbe meines Zielelements sein übergeordnetes rotes Element in 65px. Ich habe keine reine CSS-Lösung gefunden, um dieses Problem zu beheben. Wenn Sie jedoch keine andere Hintergrundfarbe haben, ist diese Lösung die beste.
quelle
Während einige der vorgeschlagenen Lösungen für Fragment-Links (= Hash-Links) auf derselben Seite funktionieren (wie ein Menü-Link, der nach unten rollt), habe ich festgestellt, dass keiner von ihnen in aktuellem Chrome funktioniert, wenn Sie Fragment-Links verwenden möchten, die von anderen stammen Seiten .
Wenn Sie also www.mydomain.com/page.html#foo von Grund auf neu aufrufen, wird dies NICHT der Fall sein Ihr Ziel in aktuellem Chrome mit einer der angegebenen CSS- oder JS-Lösungen versetzt.
Es gibt auch einen jQuery-Fehlerbericht, der einige Details des Problems beschreibt.
LÖSUNG
Die einzige Option, die ich bisher gefunden habe und die wirklich in Chrome funktioniert, ist JavaScript, das nicht onDomReady heißt, sondern verzögert.
ZUSAMMENFASSUNG
Ohne JS-Verzögerung funktionieren Lösungen wahrscheinlich in Firefox, IE, Safari, aber nicht in Chrome.
quelle
Wenn die CSS Scroll Snap-Spezifikation ins Spiel kommt, ist dies mit der
scroll-margin-top
Eigenschaft leicht möglich . Läuft derzeit auf Chrome und Opera (April 2019). Auch Safari 11+ sollte dies unterstützen, aber ich konnte es auf Safari 11 nicht ausführen. Wahrscheinlich müssen wir warten, bis die Jungs es dort reparieren.Codepen Beispiel
quelle
scroll-padding-top
undscroll-margin-top
?scroll-margin-top
für diesen Anwendungsfall ist in Safari 11-13 leider nicht implementiert: bugs.webkit.org/show_bug.cgi?id=189265scroll-snap-margin-top
: caniuse.com/#search=scroll-margin-topFür Chrome / Safari / Firefox können Sie einen hinzufügen
display: block
und einen negativen Rand verwenden, um den Versatz zu kompensieren, wie:Siehe Beispiel http://codepen.io/swed/pen/RrZBJo
quelle
Sie können dies mit jQuery tun:
quelle
Habe gerade eine andere reine CSS-Lösung entdeckt, die für mich wie ein Charme funktioniert hat!
Auf dieser Seite gefunden !
quelle
Sie könnten dies versuchen:
Stellen Sie den oberen Füllwert auf die tatsächliche Höhe Ihres Headers ein. Dies führt zu einer kleinen zusätzlichen Lücke am oberen Rand Ihres Headers, die jedoch nur sichtbar ist, wenn der Benutzer zum Anker springt und dann einen Bildlauf nach oben durchführt. Ich habe diese Lösung gerade für meine Website entwickelt, aber sie zeigt nur einen kleinen festen Balken oben auf der Seite, nichts zu hoch.
quelle
Ich habe es leicht mit CSS und HTML zu tun, mit der oben erwähnten Methode "anchor: before". Ich denke, es funktioniert am besten, weil es keine massive Polsterung zwischen Ihren Divs erzeugt.
Es scheint nicht für das erste Div auf der Seite zu funktionieren, aber Sie können dem entgegenwirken, indem Sie diesem ersten Div Padding hinzufügen.
Hier ist eine funktionierende Geige: http://jsfiddle.net/FRpHE/24/
quelle
Für mich geht das:
HTML-LINK zum Anker:
HTML-Anker:
CSS:
quelle
Ich verwende die Antwort von @ Jpsy, aber aus Leistungsgründen stelle ich den Timer nur ein, wenn der Hash in der URL vorhanden ist.
quelle
Ich hatte große Probleme mit vielen der Antworten hier und anderswo, da meine mit Lesezeichen versehenen Anker Abschnittsüberschriften auf einer FAQ-Seite waren. Das Versetzen der Überschrift half also nicht, da der Rest des Inhalts einfach dort blieb, wo er war. Also dachte ich, ich würde posten.
Am Ende habe ich einige Lösungen zusammengestellt:
Das CSS:
Wobei "120px" Ihre feste Headerhöhe ist (möglicherweise plus etwas Rand).
Der Lesezeichen-Link HTML:
Der mit Lesezeichen versehene HTML-Inhalt:
Das Gute an dieser Lösung ist, dass das
span
Element nicht nur ausgeblendet ist, sondern im Wesentlichen reduziert ist und Ihren Inhalt nicht ausfüllt.Ich kann diese Lösung nicht sehr würdigen, da sie aus einer Vielzahl unterschiedlicher Ressourcen stammt, aber sie hat in meiner Situation am besten für mich funktioniert.
Das tatsächliche Ergebnis sehen Sie hier .
quelle
<span>
mit dem Anker in der Spannweite zusammen mit dem Hinzufügen der Polsterung und des Randes funktionierte für mich. Vielen Dank, dass Sie sich die Zeit genommen haben, diese Antwort trotz des Alters des Threads einzureichen!Ich hatte kein Glück mit der oben aufgeführten Antwort und habe diese Lösung verwendet, die perfekt funktioniert hat ...
Erstellen Sie eine leere Spanne, in der Sie Ihren Anker setzen möchten.
Und wenden Sie die folgende Klasse an:
Diese Lösung funktioniert auch, wenn die Abschnitte unterschiedlich farbige Hintergründe haben! Ich habe die Lösung unter diesem Link gefunden.
quelle
Für meinen puristischen Verstand fühlt es sich etwas hackig an, aber als reine CSS-Lösung können Sie dem aktiven verankerten Element mithilfe des
:target
Selektors eine Auffüllung hinzufügen :quelle
Ich musste sowohl die CSS-Lösungen von MutttenXd als auch von Badabam zusammen verwenden, da die erste in Chrome nicht funktionierte und die zweite in Firefox nicht funktionierte:
quelle
Die Art und Weise, wie ich am saubersten finde, ist die folgende:
quelle
Ein minimal aufdringlicher Ansatz mit jQuery:
Verknüpfung:
Inhalt:
Skript:
Durch Zuweisen der Anker-Link-Klasse zu den Links wird das Verhalten anderer Links (wie Akkordeon- oder Tab-Steuerelemente) nicht beeinflusst.
Die Frage will kein Javascript, aber die andere populärere Frage ist wegen dieser geschlossen und ich konnte sie dort nicht beantworten.
quelle
Ich brauchte etwas, das für eingehende Links, Links auf der Seite UND für JS geeignet ist, damit die Seite auf Änderungen in der Headerhöhe reagieren kann
HTML
CSS
Das
z-index: -1
ermöglicht Links in der ‚Füll - Bereich‘ über einem Fragment-Ziel noch anklickbar zu sein, wie @MuttenXd auf seine Antwort kommentiertIch habe noch kein Problem in IE 11, Edge 15+, Chrome 38+, FF 52+ oder Safari 9.1+ gefunden
quelle
Dieser Code sollte den Trick machen. Tauschen Sie 45px gegen die Höhe Ihrer Kopfleiste aus.
BEARBEITEN: Wenn die Verwendung von jQuery eine Option ist, habe ich auch jQuery.localScroll mit einem festgelegten Offsetwert erfolgreich verwendet. Die Offset-Option ist Teil von jQuery.scrollTo, auf dem jQuery.localScroll basiert. Eine Demo finden Sie hier: http://demos.flesler.com/jquery/scrollTo/ (zweites Fenster unter "Offset")
quelle
Hier ist eine vollständige jquery-Lösung, die im IE funktioniert:
Angenommen, die Elemente der Navigationsleiste sehen ungefähr so aus:
Sie können das folgende jquery-Snippet verwenden, um den Bildlauf zu versetzen:
quelle
Die Implementierung mit
:before
funktionierte hervorragend, bis wir feststellten, dass das Pseudoelement tatsächlich Zeigerereignisse abdeckte und blockierte, die sich im Bereich des Pseudoelements befanden. Die Verwendung von etwas wiepointer-events: none
am:before
oder sogar direkt am Anker hatte keine Auswirkungen.Am Ende haben wir die Position des Ankers absolut gemacht und dann seine Position so angepasst, dass sie dem Versatz / der Höhe des festen Bereichs entspricht.
Versetzter Anker ohne Blockieren von Zeigerereignissen
Der Wert dabei ist, dass wir keine Elemente blockieren, die unter diese 300px fallen könnten. Der Nachteil ist, dass beim Abrufen der Position dieses Elements aus Javascript dieser Versatz berücksichtigt werden muss, sodass die dortige Logik angepasst werden musste.
quelle
So habe ich es geschafft, endlich an die richtige Stelle zu gelangen, wenn Sie auf die Navigation klicken. Ich habe einen Ereignishandler für die Navigationsklicks hinzugefügt. Dann können Sie einfach "scrollBy" verwenden, um den Versatz nach oben zu verschieben.
quelle
Ich habe ein Div mit ein paar Zeilenumbrüchen erstellt und diesem die ID gegeben. Dann habe ich den Code, den ich anzeigen wollte, darunter platziert. Der Link würde Sie dann zu dem Bereich über dem Bild führen und der Header würde nicht mehr im Weg sein:
Natürlich können Sie die Anzahl der Zeilenumbrüche an Ihre Bedürfnisse anpassen. Dies hat perfekt für mich funktioniert, ich bin mir nicht sicher, ob es irgendwelche Probleme gibt, aber ich lerne immer noch HTML.
quelle
<br>
Tags vor jeder Überschrift große Lücken im Text angezeigt.Hat dieses Skript verwendet
quelle
Ich denke, dieser Ansatz ist nützlicher:
<h2 id="bar" title="Bar">Bar</h2>
quelle
Sie können jetzt Scroll-Rand-Top verwenden , was ziemlich weit verbreitet ist .
Fügen Sie dem Element, zu dem Sie scrollen möchten, einfach das folgende CSS hinzu:
quelle
scroll-margin-top
wurde früher in diesem Thread vorgeschlagen