Hi jQuery-Gemeinde,

JavaScript ist nicht wirklich meine Stärke. Mittlerweile bin ich fast schon am Verzweifeln, was das Thema betrifft, mit dem ich mich nun schon einige Tage rumschlage.
Ausgangspunkte ist ein Accordion.
Folgende html struktur liegt vor:
Ein fixer Header. Die Inhalte des Accordions sind unterschiedlich lang ( tws länger als der Viewport hoch ist ).
Im Header befindet sich eine Navigation welche einen Anker-link zu jeder Accordion-Section enthält.
Beim Accordion selbst habe ich vor dem Header den Anker gesetzt.

Nun zu meinem Problem:
Wenn ich das Accordion am Header selbst bediene, ist das Verhalten normal.
Sobald ich allerdings den Anker aus dem Header benutze, springt mir der Inhalt undefiniert nach oben unter dem fixen Header aus dem Viewport heraus.
Es scheint auch so, als ob das ein bisschen von der Länge des Accordioninhalts abhängig ist.
Noch schlimmer ist das Verhalten am Handy...

Mein Wunsch wäre es, dass der Ankerlink die jeweilige Accordionsektion öffnet und der Header der angesprungenen Accordionsektion
immer z.B. 300px unterhalb des Windows angezeigt wird.

hat jemand einen Rat für mich?!

Vielen Dank!

Hier mein js-Code:

Code:
  $(function() {
    $( "#accordion" ).accordion({
        active: false,
        header: "h2",
        collapsible: true,
        heightStyle: "content",
        icons: { 
            "header": "fas fa-angle-right", 
            "activeHeader": "fas fa-angle-down" 
        }
    });

        //this will open Leistung accordion.
        $('#section1170').click(function(){
            $("#accordion").accordion({active:0});
        });

        //this will open Praxis accordion.
        $('#section1189').click(function(){
            $("#accordion").accordion({active:1});
        });

        //this will open Kontakt accordion.
        $('#section1031').click(function(){
            $("#accordion").accordion({active:2});
        });
  } );