HTML: Ein Link führen zum Anker, der in der Mitte der Seite zentriert ist

StackOverflow https://stackoverflow.com/questions/1418838

  •  07-07-2019
  •  | 
  •  

Frage

Ich habe einen Link zu einem Anker auf meiner HTML -Seite. Wenn der Link geklickt wird, scrollt die Seite zum Anker, sodass der Anker ganz oben am sichtbaren Teil der Seite steht. Wie kann ich die Seite scrollen lassen, damit der Anker in der Mitte der Seite ist?

War es hilfreich?

Lösung 3

Es gibt keine geraden Möglichkeit, dies in reinem HTML CSS zu tun. Es ist jedoch möglich, JS zu verwenden, indem Sie den oberen Ort des Elements erhalten und die obere Position der Seite in die Position des Elements abzüglich der Hälfte der Höhe der Seite festlegen.

Andere Tipps

Ich fand eine Lösung Verankerungslinks mit einem festen Header Gepostet von Phillip ist er Webdesigner. Phillip fügte eine neue leere Spanne als Ankerposition hinzu.

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

Setzen Sie dann den folgenden CSS -Code ein

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

Danke, Phillip!

HTML:

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

CSS:

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

hat gut für mich funktioniert

Platz a <span class="anchor" id="X"> dann style the anchor Klasse wie: 

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

Mit -50vh Der Anker scrollt in der Mitte des Bildschirms.

Wenn Sie ohne leeren Speicherplatz wollen, tun Sie es so:

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

Sie müssen jedoch immer noch die Höhe von JavaScript regulieren

Bestimmen Sie, welchen Teil Ihrer Seite Sie oben oben erwarten, und platzieren Sie den Anker stattdessen dort. Sie werden nicht in der Lage sein, die Art und Weise zu ändern, wie Browser die Anker interpretieren - zumindest nicht, ohne Ihre Benutzer zu stören.

Da "Mitte der Seite" zu einem bestimmten Zeitpunkt relativ zur Größe des Bildschirms und des Fensters des Benutzers liegt Breite.

Ausgang von Charles.cc.hsus Antwort, Wir können dies für Elemente der willkürlichen Höhe tun, indem wir die vh CSS -Einheit, das relativ zur Höhe des Ansichtsfenster ist.

HTML:

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

CSS:

.anchor{
    display: block;
    height: 50vh; /* 50% viewport height */
    margin-top: -50vh;
    visibility: hidden;
}

vh wird in IE9 und up unterstützt, daher ist es ziemlich sicher zu bedienen.

Ich würde versuchen, einen negativen Rand (oder eine andere Positionierungsmethode) auf die Hälfte der Seitenhöhe auf dem Ziel -Anker -Tag zu setzen.

Firefox unterstützt das Einstellen einer Padding-Top-Eigenschaft am benannten Anker. Von dort aus können Sie ein Cookie über JavaScript festlegen, das die Abmessungen des Browsers enthält, und Ihre Polstertop entsprechend serverseitig einstellen. Für den Endbenutzer würde es so aussehen wie sein reines HTML/CSS, aber Noam ist insofern richtig, als ein bisschen JS benötigt wird, um die Dimensionen des Browsers zu erhalten, da es Ihnen diese Informationen ohne ein wenig Zwang nicht gibt.

Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top