jQuery: scrollTop für mehrere IDs zusammenlegen

  • Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Failix

Neues Mitglied
3 Mai 2021
12
1
3
50
Hallo zusammen,

ich arbeite mich gerade in jQuery ein, das meiste klappt bereits sehr gut. Manchmal bleiben aber Fragen offen, z. B. hier:

$("#link-seven").click(function() {
$('html, body').animate({
scrollTop: $("#seven").offset().top - 100}, );
});

Diese Funktion bewirkt beim Klick auf den Link mit der ID "link-seven" ein Scrollen zum Element mit der ID "seven" mit 100 Pixeln Versatz. Nun habe ich aber, wie die Bezeichnungen vielleicht vermuten lassen, sieben Links und sieben Sprungziele auf einer Seite. Um jedes Sprungziel mit einem Offset von 100 Pixeln zu erreichen, könnte ich nun natürlich diese Funktion noch sechsmal niederschreiben und jeweils die IDs ändern. Ich vermute aber, dass es auch einfacher und mit weniger Code geht. Könnte mir bitte jemand auf die Sprünge helfen?

Danke und Gruß
Felix
 

Sempervivum

Senior HTML'ler
18 Oktober 2016
2.475
474
83
68
Du vermutest richtig, es geht, ohne den Code zu vervielfachen. Ich versuche es mal ungetestet:
Code:
// Alle Elemente ermitteln, deren ID mit "link-" beginnt:
$('[id^="link-"]').click(function() {
    // Aus der ID die Zeichenfolge "link-" entfernen,
    // dann haben wir die ID des Ziels:
    const id = $(this).attr('id').replace('link-', ''); 
    $('html, body').animate({
        scrollTop: $('#' + id).offset().top - 100}, );
    });
});
Schade, dass Safari das Smoothscrolling nicht unterstützt, sonst könnte man das vollkommen ohne Javascript nur mit CSS und Ankern erledigen:
 

Failix

Neues Mitglied
3 Mai 2021
12
1
3
50
@Sempervivum Vielen Dank, der Code funktioniert hervorragend! Ich verstehe auch, was er tut, wenngleich mir noch nicht alle Elemente daraus geläufig sind. Es gibt halt immer etwas zu lernen.

Für Sprungziele mit Versatz ohne jQuery hatte ich mir mal diesen Workaround gegoogelt:

<div style="position:relative;">
<div style="position:absolute; top:-100px;" id="seven"></div>

[Content]

</div>

Aber das erzeugt halt zusätzliche Div-Suppe im Quellcode, was ich gern vermeide.