Sie haben es bereits gesehen, Sie klicken auf einen Link in der Navigation und gelangen nicht zu einer anderen Seite, sondern zu einem bestimmten Punkt auf der aktuellen Seite. Wie wird das erreicht? Mit extrem einfachem HTML-Code, den Sie in wenigen Sekunden abrufen können!
Um es weiter auszudrücken, werden wir auch sehen, wie man den Übergang mit einer kleinen jQuery animiert.
Interne Verlinkung: The Gist
Wie ich im Intro erklärt habe, lernen wir heute einen grundlegenden Trick und sehen dann, wie man ihn noch besser macht. Als ich das Webdesign zum ersten Mal lernte, war dies eines der Dinge, von denen ich immer sagte, ich müsste es herausfinden, aber ich sollte immer etwas lernen. Wenn Sie im selben Boot sitzen, ist dieser Artikel für Sie.
Live Demo: Klick hier
Eine Geschichte von zwei Links
Wie Sie sich vermutlich vorstellen können, erfordert das Verlinken zu einem internen Abschnitt Ihrer Seite nicht nur einen, sondern zwei Links. Zuerst möchten Sie den Link hinzufügen, der als Anker dient, zu dem Sie scrollen können. Dann erstellen Sie den standardmäßigen anklickbaren Link wie gewohnt und leiten ihn an den ersten Link. Sinn ergeben? Wenn nicht, machen Sie sich keine Sorgen, es ist einfacher als Sie denken.
Nehmen wir für den ersten Teil an, dass wir einen Link in eine Fußzeile einfügen, der zum oberen Seitenrand blättert, was bei längeren Seiten üblich ist. Um diesen Link einzufügen, verwenden wir eine Syntax, mit der Sie möglicherweise nicht vertraut sind:
Beachten Sie, dass wir anstelle des typischen "a href" einen Namen verwendet haben. Dies ist wichtig und wird wahrscheinlich ausgelöst, wenn Sie gewohnt sind, Verknüpfungen mit dem ersteren einzufügen. Sie können alles auswählen, was Sie für den Namen wünschen. Denken Sie daran, dass es am besten ist, etwas Beschreibendes zu verwenden, wie wir es hier getan haben. Notieren Sie sich auch den Namen, den Sie verwenden, da wir uns im nächsten Schritt erneut darauf beziehen müssen.
Sobald der Link fertig ist, können Sie den Anker einfügen. Wenn Sie zu einem bestimmten Punkt auf einer Seite blättern möchten, müssen Sie an dieser Stelle ein wenig Code einfügen, damit der gerade erstellte Link weiß, wohin er gehen soll.
Da wir auf den Anfang der Seite verlinken möchten, würden wir diesen Ausschnitt oben in unseren HTML-Code einfügen.
Hier sind einige wichtige Dinge zu beachten. Zuerst haben wir einen Hashtag am Anfang des Links hinzugefügt. Dies erscheint nicht im ersten Link, aber im zweiten. Der Textteil dieser Verknüpfung wurde ebenfalls leer gelassen. Dies ist nicht notwendig, aber tatsächlich eine Option. In den meisten Fällen verlinken Sie wahrscheinlich auf ein Element, das sich bereits in Ihrem Layout befindet, sodass hier Inhalte angezeigt werden.
Demo erstellen
Nachdem Sie nun die Syntax verstanden haben, ist es an der Zeit, eine grundlegende Webseite mit dem Erlernten zu erstellen. Natürlich müssen wir eine Seite erstellen, die lang genug ist, um scrollen zu können. Zu diesem Zweck werfen wir zunächst einige große Textblöcke mit jeweils eigenen Schlagzeilen auf.
Die vier Schlagzeilen sollten uns vier mögliche Orte bieten, zu denen Sie scrollen können, damit wir perfekt aufgestellt sind! Von hier aus möchten wir die h1-Elemente in die genannten Links einfügen.
CSS starten
Nun werfen wir etwas grundlegendes Styling für diesen Text auf. Alles, was ich wirklich getan habe, sind die Schriftarten und ein bisschen Rand für jeden Abschnitt, um sie schön auszubreiten.
So sehen die resultierenden Absätze aus. Super einfach, aber sie erledigen die Arbeit für das, was wir brauchen.
Navigation und Kopfbild
Um zu den Ankern zu navigieren, müssen wir eine Reihe von Links in unserer HTML-Datei erstellen, indem Sie die Hashtag-Methode am Anfang dieses Artikels verwenden. Wir werden auch ein Platzhalter-Bild einfügen, um uns etwas mehr Bildlaufraum zu geben.
Fertige Demo: Reines HTML / CSS
Damit ist unsere interne Link-Demo komplett! Klicken Sie auf einen der Links in der Navigation, um Sie zu diesem Punkt der Seite zu führen. Beachten Sie, dass bei den Ankern am unteren Rand der Seite die Bildlaufleiste so weit wie möglich nach unten geht.
Live Demo: Klick hier
Animieren der Schriftrolle
Mit HTML funktioniert die Ankerverknüpfung, aber der Übergang ist ziemlich hart.Es gibt keine Animation, die Seite springt beim Anklicken direkt zum Anker. Was ist, wenn wir dies für einen allmählicheren Effekt machen möchten, so dass der Benutzer einfach sehen kann, dass die Seite nach unten scrollen wird?
Sie können den gesamten Linking- und Scroll-Vorgang in JavaScript durchführen. Dies ist jedoch eine schlechte Idee, weil Sie die Anzahl der Personen, die Ihre Website verwenden können, unnötig auf diejenigen mit aktiviertem JavaScript beschränken. Stattdessen ist es viel besser, die Verknüpfung in HTML genau wie hier einzustellen und dann den Animationseffekt für JavaScript-Benutzer hinzuzufügen. Die Site funktioniert weiterhin für alle, bei denen JS deaktiviert ist. Sie sehen die Animation einfach nicht.
Um dies zu erreichen, brauchen wir drei Dinge. Der erste ist natürlich jQuery, denn es ist erstaunlich und macht alles einfacher. Das zweite ist ein äußerst praktisches kleines jQuery-Plugin von Ariel Flesler mit dem Namen ScrollTo. Schließlich benötigen Sie einen Ableger von ScrollTo mit dem Namen LocalScroll.
Das hört sich kompliziert an, ist aber super einfach. LocalScroll wurde ausschließlich zum Animieren des Ankerscrollings entwickelt und ist somit das perfekte Werkzeug für den Job. Es ist auch die mit Abstand einfachste Lösung, die ich finden konnte! Als erstes müssen Sie LocalScroll herunterladen und zusammen mit jQuery in Ihren HTML-Code einfügen (ScrollTo wird ebenfalls in den Download aufgenommen).
Als nächstes müssen wir das übergeordnete Element übergeben, das die Hashtag-Links enthält. In unserem Fall enthält das #nav -Div die Links, sodass wir dies in das folgende Snippet einfügen:
Um dies in Ihren eigenen Projekten zu implementieren, müssen Sie nur das Ziel ändern und bei Bedarf eine Dauer für die Animation angeben. Das ist es! Dieser eine kleine Textblock sorgt für den animierten Bildlaufeffekt.
Fertige Demo: Animiert mit JavaScript
Hier ist Version 2 unserer Demo, diesmal mit der JavaScript-Einwurfhilfe. Vergleichen Sie sie mit der vorherigen Version, um zu sehen, wie viel schöner der Effekt beim Übergang ist.
Live Demo: Klick hier
Fazit
Zum Schluss sei daran erinnert, dass das Verknüpfen mit einem Bildlaufpunkt auf Ihrer Seite mit reinem HTML einfach ist. Sie müssen lediglich einen benannten Link einrichten, der an eine bestimmte Stelle angehängt ist, und einen anklickbaren Link, über den Sie dorthin gelangen.
Wenn Sie den Übergang schrittweise gestalten möchten, verwenden Sie jQuery und LocalScroll zusammen. Stellen Sie sicher, dass Sie sowohl den übergeordneten Container für Ihre Links als auch die Dauer der Animation angeben.