Oh habe gerade gemerkt, dass es "Kreis" statt "kreis" sein müsste. Jetzt springt er, aber bis ans Ende der Seite und dabei wird der svg-Kreis übersprungen
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. -
Moment, ich probiere es gleich!
-
Das verstehe ich nicht: das svg ist 1500 mal 1500 und der svg-Kreis hat seinen Mittelpunkt bei 1100 und 900 -> also im svg und sichtbar.
Nur er springt nicht zum Kreis.
-
Du hast aber mit deinem Code vorher das gesagt:
Die ID lag auf der SVG nicht auf dem Kreis. -
wenn ich den kreiss eine id gebe klappt das bei mir nicht ,nur wenn das svg eine id hat.
Verstehe ich gerade auch nicht
-
ahh CTS-X danke!!
Ja bei mir klappt es mit einer id beim circle auch nicht
-
muss man auf den circle evtl über die svg zugreifen?
Evtl weiß der PC nichts mit der circle-id anzufangen, weil der circle an sich ja in einem svg-Element steckt?!
-
hab jetzt noch vergeblich rumprobiert. Er springt höchstens zum svg, aber nicht zum Kreis
-
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
-
In das svg soll noch mehr als nur ein einziger Kreis. Daher die Größe. Die sollte doch vollkommen egal sein. Die Funktion geht einfach nicht.
-
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
-
Danke für Deinen unermüdlichen Einsatz!!
Leute wie Dich braucht man!
-
Jetzt mitmachen!
Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!