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.
Antworten:
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.
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.
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.
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.
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.