HTML: Erstellen eines Links führen zum Anker in der Mitte der Seite zentriert

Ich habe einen Link zu einem Anker auf meiner HTML-Seite. Wenn auf die Verknüpfung geklickt wird, wird die Seite zum Anker verschoben, so dass sich der Anker ganz oben im sichtbaren Teil der Seite befindet. Wie kann ich die Seite so scrollen, dass der Anker in der Mitte der Seite ist?HTML: Erstellen eines Links führen zum Anker in der Mitte der Seite zentriert

Quelle

2009-09-13 olamundo

Es gibt keine direkte Möglichkeit, dies in reinem html \ css zu tun. Es ist jedoch möglich, js zu verwenden, indem Sie die oberste Position des Elements abrufen und die oberste Position der Seite auf die Position dieses Elements abzüglich der Hälfte der Seitenhöhe festlegen.

Quelle

2009-10-02 15:53:21 olamundo

Bestimmen Sie, welchen Teil Ihrer Seite Sie eigentlich wollen, und platzieren Sie stattdessen den Anker dort. Sie werden die Art, wie Browser Anker interpretieren, nicht ändern können - zumindest nicht ohne Ihre Benutzer zu verärgern.

Quelle

2009-09-13 21:25:15

Abhängig von der Breite des Browserfensters und der Art und Weise, wie die Seite fließt, kann diese Methode dazu führen, dass der tatsächliche Anker unter dem Ansichtsfenster liegt.Ich würde mit der JavaScript-Lösung gehen und erkennen, dass Browser ohne Javascript nur ohne die ausgefallene Funktion auskommen müssen. –

Ich würde versuchen, einen negativen Rand (oder eine andere Positionierungsmethode) gleich der halben Seitenhöhe auf dem Zielanker-Tag zu setzen.

Quelle

2009-09-13 21:32:32 edeverett

Da "Mitte der Seite" relativ zu der Größe des Bildschirms und des Fensters des Benutzers ist, müssen Sie Javascript verwenden, da es in reinem HTML/CSS keine Möglichkeit gibt Holen Sie sich die vertikale Bildschirmbreite.

Quelle

2009-10-02 15:55:50 Triptych

vertikale Bildschirmbreite, a.ka.a. Bildschirmhöhe? – LarsH

Firefox unterstützt das Festlegen einer padding-top-Eigenschaft für den benannten Anker. Von dort aus können Sie über JavaScript ein Cookie setzen, das die Dimensionen des Browsers enthält, und Ihr padding-top entsprechend serverseitig anpassen. Für den Endbenutzer würde es wie sein reiner html/css aussehen, aber noam ist darin richtig, dass ein kleines bisschen JS benötigt wird, um die Dimensionen des Browsers zu erhalten, da es Ihnen diese Information ohne ein wenig Zwang nicht gibt.

Quelle

2009-10-08 13:18:18

html:

<a id="anchor">NEWS</a>

css:

#anchor{ 
position: relative; 
padding-top: 100px; //(whatever distance from the top of the page you want) 
}

funktionierte gut für mich

Quelle

2011-03-12 00:13:15 jakub

Ausgezeichnet! Es könnte nicht einfacher sein. – fbiazi

Funktioniert nicht mit Chrome – elcsiga

Ich fand eine Lösung Anchor Links With A Fixed Header von Phillip geschrieben, er ist ein Web-Designer. Phillip fügte eine neue LEERE Spanne als Ankerposition hinzu.

<span class="anchor" id="section1"></span> 
<div class="section"></div>

dann setzen Sie die folgenden CSS-Code

.anchor{ 
    display: block; 
    height: 115px; /*same height as header*/ 
    margin-top: -115px; /*same height as header*/ 
    visibility: hidden; 
}

Danke, Phillip!

Quelle

2015-03-18 13:47:16

, wenn Sie ohne Leerzeichen wollen tun es wie folgt aus:

<h2 id="jump_tag" style="padding-top: 500pt; margin-top: -500pt;"></h2>

, aber Sie werden immer noch Höhe von Javascript zu regulieren haben

Quelle

2016-07-25 09:52:11

seine Arbeit Dankeschön – Inderjeet

Meine Lösung ist: Platz ein <span class="anchor" id="X"> dann Stil die "Anker" -Klasse wie:

.anchor { 
position:absolute; 
transform:translateY(-50vh); 
}

Dank der "-50vh" wird der Anker scrollen in der Mitte des Bildschirms.

überprüfen Sie https://www.w3schools.com/cssref/css_units.asp für weitere Informationen.

Quelle

2017-12-27 15:54:30

HTML: Erstellen eines Links führen zum Anker in der Mitte der Seite zentriert

Antwort

Verwandte Themen