Wie kann ich einen Link zu einer bestimmten Position auf einer Webseite erstellen? [geschlossen]

14

Ist es möglich, einen Hyperlink zu einer bestimmten Bildlaufposition auf einer Webseite zu erstellen? Zum Beispiel möchte ich einen Link zu http://www.stackoverflow.com/ erstellen , bei dem die Seite jedoch 100 Pixel nach unten gescrollt ist.

html scrolling hyperlink Anderson Green
quelle
Ich wünschte, es gäbe eine Möglichkeit, mithilfe von Pixeln in der URL eine Verknüpfung zu einer bestimmten Position herzustellen.
Akinuri

Antworten:

3

Sie können mit dem jQuery scrollTo-Plugin zu einer bestimmten Position scrollen . Wenn Sie einen Blick auf die Demo-Seite werfen , werden Sie feststellen, dass das Plugin viele verschiedene Optionen bietet, darunter das Scrollen zu einer bestimmten Position. Das bedeutet jedoch, dass Sie das JavaScript des Ziels steuern müssen, sodass dies möglicherweise nicht für einen Link zu einer externen Website geeignet ist.

Amos M. Carpenter
quelle
14

Der Vanille-Weg-Link zu einer bestimmten Stelle auf der Seite erfolgt über einen Ankerpunkt, der bereits auf der Seite vorhanden ist.

Dies kann mit dem <a>…</a>Tag erstellt werden . Beachten Sie, dass der in "Ankerpunkt" (oben) angegebene Link #h-12.2am Ende steht. Dies entspricht der <a id="h-12.2">12.2</a>Einbettung in den HTML-Code, der die Seite bildet. Wenn Sie darauf klicken, wird die Seitenansicht an diesem Anker neu positioniert.

Beachten Sie, dass vor HTML5 das nameAttribut im Ankertag verwendet wurde, aber nicht mehr unterstützt wird und das idAttribut an seiner Stelle ( Referenz ) verwendet werden sollte. Dies bedeutet auch, dass Sie jedes Element für ein Ankertag verwenden können. Sie sind nicht auf das <a>Element beschränkt.

Paul
quelle
6

Ähnlich wie bei Pauls Antwort können Sie auch auf das erste Auftreten einer Tag-ID in einem HTML-Dokument verweisen. Dies ist jedoch keine exakte Pixelanzahl.

Verknüpfen oder scrollen Sie zum Beispiel zu den Fragen oder Antworten dieser Seite .

Mike Fitzpatrick
quelle
6

Klicken Sie mit der rechten Maustaste und überprüfen Sie die Elemente auf der Seite. Sie finden die <a>Tags, das sind die Ankerpunkte.

Nehmen Sie dann den <ersten und den letzten vor, adamit sie nicht als Links auftauchen. Sie können die Auswirkungen tatsächlich sehen, während Sie in das Antwortfeld schreiben, wenn die Vorschau unten angezeigt wird.

a href="/superuser/382047/linking-to-a-specific-scroll-position-on-a-web-page#question-header">question /a>

und

a href="/superuser/382047/linking-to-a-specific-scroll-position-on-a-web-page#answers">answers /a>

Wie Sie sehen, befindet sich der einzige Unterschied ganz am Ende, wo der Anker nach dem Pfund ( #) benannt ist. Der Name nach dem >steht dafür, wie der Link für den Benutzer gelesen wird.

In diesem Fall lautet "Fragekopf" "Frage" und die Antworten sind zufällig gleich.

Dann sollte das Folgende auf Mikes Kommentar verweisen . Da ist ihr Ankerpunkt382094

Zur Verdeutlichung können Sie einfach den Anker finden und den #nach Ihrem Link hinzufügen .

/superuser/382047/linking-to-a-specific-scroll-position-on-a-web-page#question-header

/superuser/382047/linking-to-a-specific-scroll-position-on-a-web-page#answers

/superuser/382047/linking-to-a-specific-scroll-position-on-a-web-page#880079

Diese führen Sie alle zu verschiedenen Stellen auf derselben Seite.

Georgeq
quelle
Funktioniert dies nur für IDs oder auch für Klassen? Wenn ich beispielsweise ein Element hatte, z. B. <h3 class = "theClass"> Header </ h3>, wie kann ich eine Verknüpfung zu diesem Element herstellen, das keinen ID-Attributwert hat?
Ulysses Alves
1

Um eine Verknüpfung zu einer pixelspezifischen Position auf einer Seite herzustellen, platzieren Sie das Ankertag in einem Div, das absolut mit den Koordinaten "top: x left: y" positioniert ist.

Graeme
quelle
Ich habe dies beim Erstellen einer responsiven Site verwendet, bei der das Menü oben fixiert war. Normale Ziele platzierten sich oben im positionierten Bereich hinter dem Menü. Mit der obigen Technik war es einfach, die oberen Bereiche der erforderlichen Abschnitte mit den unteren Bereichen des Menüs in einer Linie auszurichten.
Graeme
0

Sie können Citebite verwenden , um eine Verknüpfung zu einer bestimmten Position einer Webseite herzustellen , auch wenn an dieser Position keine ID verwendet wird. Es ist einfach zu bedienen. Gehen Sie einfach zu dem Link, den ich hier bereitgestellt habe, und fügen Sie den Teil des Texts, den Sie anzeigen möchten, zuerst ein, nachdem Sie zu Ihrer Webseite in das Feld Zitiertext gegangen sind, und geben Sie dann den Link der Webseite in das Feld Quell-URL-Text ein. Klicken Sie dann auf Citebite erstellen. Dann wird ein Link erzeugt. Dieser Link wird Ihr gewünschter Link sein.

Farabi Siddique
quelle
1
Willkommen bei Super User! Bitte lesen Sie Wie Sie Software empfehlen, um die erforderlichen Mindestinformationen und Vorschläge zu erhalten, wie Sie Software für Super User empfehlen können. Damit Ihre Antwort auch dann nützlich bleibt, wenn der / die bereitgestellte (n) Link (s) nicht mehr funktionieren, sollten diese Details in Ihre Antwort übernommen werden.
Ich sage Reinstate Monica
@ Twisty Der bereitgestellte Link ist die Software. Es ist eine Web-App. Dies scheint ausreichend zu sein. Farabi, wenn Sie mit Citebite verbunden sind, müssen Sie dies offenlegen. Ansonsten bist du gut.
Duncan X Simpson
@DuncanXSimpson Bitte lies den Meta-Post, den ich verlinkt habe. Mehr als nur der Name der Software und ein Link sind erforderlich, um die Site-Standards zu erfüllen.
Ich sage Reinstate Monica
@ Twisty 1. Fertig. 5. Okay, ich denke, Sie könnten hier einen Fall machen. Farabi, du solltest eine kurze Anleitung geben, wie man es benutzt. 6. Es gibt nichts Personalisiertes. Dieses Tool ist genau das, was OP benötigt; nicht mehr und nicht weniger.
Duncan X Simpson
1
Link ist tot :(
Aryan Firouzian