Tutorial

Wie füge ich „Zurück“ hinzu? — Ein Tutorial zu den drei häufigsten Anwendungsbereichen

Melden

Da das Thema "How to add BACK" (Wie füge ich 'Zurück' hinzu) in vielen Bereichen der Technik vorkommt, habe ich dieses Tutorial in die drei häufigsten Kategorien unterteilt:

  1. Webseiten (HTML/JavaScript) – Der klassische „Zurück“-Button im Browser.
  2. App-Entwicklung (React Native/Flutter) – Navigation in einer App.
  3. Design (UI/UX) – Wo und wie man den Button platziert.

1. Webseiten: HTML & JavaScript

Wenn du einen Button auf einer Webseite erstellen möchtest, der genau das Gleiche tut wie der „Zurück“-Pfeil des Browsers.

Methode A: Der einfache HTML-Link

Dies ist die schnellste Methode mit einem kurzen JavaScript-Befehl im href-Attribut.

<a href="javascript:history.back()">← Zurück gehen</a>

Methode B: Ein richtiger Button (Empfohlen)

Ein Button sieht oft professioneller aus und lässt sich leichter mit CSS stylen.

<button onclick="window.history.back()">Zurück</button>

Methode C: Mit JavaScript (für Logik)

Falls du prüfen willst, ob es überhaupt eine Seite gibt, zu der man zurückkehren kann:

function goBack() {
  if (window.history.length > 1) {
    window.history.back();
  } else {
    // Falls kein Verlauf da ist, schicke den User zur Startseite
    window.location.href = "index.html";
  }
}

2. App-Entwicklung (Mobile Frameworks)

In modernen Apps nutzt man meist "Stacks" für die Navigation.

In React Native (mit React Navigation)

Wenn du einen Header-Button manuell hinzufügen willst:

import { useNavigation } from '@react-navigation/native';

const BackButton = () => {
  const navigation = useNavigation();
  return (
    <Button title="Zurück" onPress={() => navigation.goBack()} />
  );
};

In Flutter

Flutter nutzt den Navigator.

ElevatedButton(
  onPressed: () {
    Navigator.pop(context); // Schließt die aktuelle Seite und geht zurück
  },
  child: Text('Zurück'),
)

3. Design-Grundlagen: Wo gehört das "Zurück" hin?

Technik ist das eine, Benutzerfreundlichkeit (UX) das andere. Hier sind die Regeln:

  1. Oben links ist Standard: In 99% aller Webseiten und Apps befindet sich der Zurück-Button oben links. Dort suchen User zuerst.
  2. Klarheit: Verwende ein Icon (z. B. < oder ←) zusammen mit dem Wort „Zurück“. Nur ein Icon kann manchmal missverständlich sein.
  3. Nicht redundant sein: Auf Android-Geräten gibt es oft einen systemweiten Zurück-Button oder eine Geste. Achte darauf, dass dein Button im Design nicht mit den System-Elementen kollidiert.
  4. Sticky (Feststehend): Bei sehr langen Seiten kann es sinnvoll sein, den Zurück-Button "sticky" am oberen Rand zu lassen, damit der User nicht erst ganz nach oben scrollen muss.

4. Spezialfall: "Back to Top" (Zurück nach oben)

Manchmal meint man mit "Back" auch den Sprung an den Anfang der Seite.

HTML:

<a href="#top" id="back-to-top">Nach oben</a>

CSS (für sanftes Scrollen):

html {
  scroll-behavior: smooth;
}

Welchen Bereich meintest du genau? Falls du eine spezielle Programmiersprache oder ein Programm (wie Excel oder Photoshop) meinst, gib mir kurz Bescheid!

0