Blättern Sie auf Radio Click zur Abschnitts-ID

Ben

Ich versuche, die Seite je nach Radio-Klick zu einer bestimmten Abschnitts-ID zu scrollen.

Derzeit erhalte ich die Fehlermeldung: Uncaught TypeError: Cannot read property 'top' of undefined

Ich dachte, ich hätte es definiert, ich kann console.log(this.id);den richtigen Wert verwenden und erhalten, muss aber etwas falsch herum haben!

Hier ist der JSfiddle- Link

Vielen Dank!

user2603796

Sie können Ihr HTML wie folgt erstellen:

<input type="radio" value="1" name="selection">1
<input type="radio" value="2" name="selection">2
<input type="radio" value="3" name="selection">3
<input type="radio" value="4" name="selection">4

Sie sollten valuehier stattdessen ein Attribut verwenden id, da Sie für die Abschnitte dieselben IDs verwenden. Sie sollten eindeutige IDs haben, da dies zu Verwirrung und Problemen führen kann. Jetzt 1,2,3,4gehören IDs nur noch zu den Abschnitten.

Und im Code, zu dem Sie scrollen "#"möchten , müssen Sie ihn anhängen, bevor Sie die Abschnitts-ID auswählen, zu der Sie scrollen möchten.

$(document).ready(function() {
    $('input:radio[name=selection]').change(function()
    {
        $('html,body').animate(
        {
                scrollTop: $('#'+this.value).offset().top
      }, 1000);
    });
});

Dieser Artikel stammt aus dem Internet. Bitte geben Sie beim Nachdruck die Quelle an.

Bei Verstößen wenden Sie sich bitte [email protected] Löschen.

bearbeiten am
0

Lass mich ein paar Worte sagen

0Kommentare
LoginNach der Teilnahme an der Überprüfung

Verwandte Artikel

TOP Liste

  1. 1

    MongoDB eingebettetes Dokument unterscheiden und filtern

  2. 2

    Wie aktualisiere ich ein Feld in einer Raumdatenbank mit einem Repository und einem Ansichtsmodell?

  3. 3

    Interpolieren Sie mit Python die 2D-Matrix entlang der Spalten

  4. 4

    So verschieben Sie ein Bild in Flutter/Dart mit einem Draggable

  5. 5

    Wie vermeide ich, dass die gesamte App neu geladen wird, wenn Nav.Link von React-Bootstrap verwendet wird?

  6. 6

    Wie verwende ich Format-Table ohne Abschneiden von Werten?

  7. 7

    numpy: Berechnen Sie die Ableitung der Softmax-Funktion

  8. 8

    Warum funktioniert das Umgebungslicht in diesem Beispiel nicht?

  9. 9

    Ersetzen von Einträgen in einer Spalte durch eine andere basierend auf der Bedingung

  10. 10

    So berechnen Sie die Verfügbarkeit von Anwendungen (SLA)

  11. 11

    Wie ändere ich die Farbe des Symbols und des Textes, wenn ich den Bildschirm im Navigator der unteren Registerkarte in "Reaktion native" ändere?

  12. 12

    spring-data-jpa: ORA-01795: Die maximale Anzahl von Ausdrücken in einer Liste beträgt 1000

  13. 13

    Wie lade ich eine Datei herunter, ohne den Typ oder Dateinamen zu kennen?

  14. 14

    Excel VBA - Erstellen Sie mehrere Dateien aus Daten in mehreren Arbeitsmappen

  15. 15

    Docker bleibt beim Ausführen von time.sleep (1) in einer Python-Schleife hängen

  16. 16

    Überprüfen Sie, ob der ausgewählte Wert 'YES' ist, wenn ja, aktivieren Sie ein Steuerelement mit Javascript

  17. 17

    Python gibt einen Fehler aus, dass eine Datei nicht vorhanden ist, wenn dies eindeutig der Fall ist

  18. 18

    TypeAhead.js zeigt keine Ausgangsschienen an?

  19. 19

    Pandas rufen einen Wert basierend auf dem Index ab

  20. 20

    Aktualisieren des Werts im Json-Objekt in Python

  21. 21

    Das Abrufen von einer URL zeigt einen Fehler in der Konsole an, auch nachdem er abgefangen wurde?

heißlabel

Archiv