Sprung innerhalb der Seite

    So geht's erstmal. Ich versuche es gleich mit einem button.


    <head>

    <style>

    body{

    height:1200px;

    }

    #kreis{

    width:100px;

    height:100px;

    background:red;

    border-radius:50%;

    margin-top:1000px;

    }</style></head><body>

    <a href="javascript:void(0)" onclick="document.getElementById('kreis').scrollIntoView();">ZumBallScrollen</a>


    <div id="kreis"></div>


    </body></html>

    so geht's nicht:


    <head>

    <style>

    body{

    height:1500px;

    }

    </style>

    </head>

    <body>

    <a href="javascript:void(0)" onclick="document.getElementById('kreis').scrollIntoView();">ZumKreisScrollen</a>


    <svg width="1204" height="1300"><circle id="kreis" cx="380" cy="310" r="20" stroke-width="5" stroke="red" fill="red" fill-opacity="0.5"/></svg>

    </body>

    </html>

    und so geht's auch nicht. Er springt nur ein mini mini Stück nach rechts ohne den kreis zu sehen



    <head>

    <script>

    function Los() {

    document.getElementById('kreis').scrollIntoView();

    }

    </script>


    </head>

    <body>


    <input type="button" value="Zeige" onclick="Los();" /><br><br>


    <svg id="kreis" width="1500" height="1500">

    <circle cx="1100" cy="900" r="40" stroke="green" stroke-width="4" fill="yellow" />

    </svg>

    </body>

    </html>




    Es geht auch nicht mit der Funktion unter dem svg.

    https://codepen.io/CTS-X/pen/ZxpWOO

    Dein Script geht. Du hast aber die Fläche für das SVG mit 1500x1500px beschrieben. Und das ist genau so hoch wie er springt. Wenn du die Fläche vernünftig groß machst und dann per CSS die Position bestimmst hast du es.

    Edit: du kannst auch dem Kreis selber eine ID geben, nicht der SVG. Würde auch gehen.
    Edit: Bitte nochmal aufrufen. Hatte den falschen Pen verlinkt.

    So springt er bis ans untere Ende der Seite. Um den Kreis zu sehen, muss man noch nach rechts scrollen:


    <html>

    <head>

    <script>

    function Los() {

    document.getElementById('Kreis').scrollIntoView();

    }

    </script>

    </head>


    <body>


    <input type="button" value="Zeige" onclick="Los();" /><br><br>

    <svg id="Markierung" width="3500" height="3500"><circle id="Kreis" cx="3100" cy="2900" r="40" stroke="green" stroke-width="4" fill="yellow" /></svg>

    </body>

    </html>


    Irgendjemand eine Idee??

    Wo ist das Problem

    * Link entfernt , weil existiert nicht mehr *

    Warum sind deine Werte den so groß . Kein Mensch hat ein Bildschirm der 3500 Pixel breit und hoch ist

    Mach das SVG so groß wie den Kreis und verschieb dann das SVG mit CSS da hin wo du es brauchst

    Den Kreis eine Id geben klappt irgendwie nicht. Aber ich kenne mich mit svg nicht aus ob das überhaupt geht.Ich werde gleich mal googlen.

    Fals es nicht geht ,dann nimm doch die andere Variante von der wo die Kordinaten drinne stehen.

    Wenn deine Seite Komplett fertigist schreibst du zum schluss die Kordinaten rein und fertig.

    Aber wegen svg und id kucke ich mal ob das geht und warum es nicht geht

    Das geht zwar den Kreis eine ID zu geben ,aber wenn der Kreis in einem riesigen SVG Feld verschwindet ,springt das Script irgendwo ins SVG ,nur nicht zum Kreis. Das geht nur, wenn Kreis und SVG fast gleich groß sind.


    Also wenn dann musst du SVG kleiner machen ,oder mit den Koordinaten arbeiten, das ist dann egal wie groß das SVG ist.


    Mit der ID geht es nur so.

    * Link entfernt , weil existiert nicht mehr *

    Andere Möglichkeiten sehe ich da nicht

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!

Benutzerkonto erstellen Anmelden