Sprung innerhalb der Seite

  • Hallo


    folgendes Problemchen: der Code funktioniert im Internet Explorer, jedoch nicht in Chrome.

    Weiß jemand, wie man ihn auch unter Chrome zum Laufen bringt??


    <html>

    <head>

    <style>

    body {

    height: 2000px;

    width: 2000px;

    }

    </style>


    <script>

    function Los() {

    var html = document.documentElement;

    html.scrollLeft += 30;

    html.scrollTop += 10;

    }

    </script>


    </head>

    <body>


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

    </body>

    </html>

  • bin jetzt gerade zeitlich gebunden, deswegen nur ein schneller Link:
    https://stackoverflow.com/ques…-of-page-using-javascript

    Falls du nicht doch lieber zu einem bestimmten Element anstatt per px springen möchtest.

    Edit: aus dem Thread: The scrollIntoView(true) method also accepts a parameter specifies whether to align to top (true) or bottom (false).

    Würde mal danach googlen. Müsste dir weiterhelfen. Ich selbst lös es aber wie gesagt lieber mit Sprung zu Zielelementen.

  • basti1012: wenn ich auf den Button klicke soll er zu einer bestimmten Stelle auf der Seite springen, nicht unbedingt ans Ende.

    Daher wäre eine Angabe in px gut denke ich.


    CTS-X: springt er auch zu einzelnen Elementen, wie z.B. einem kleinen svg-Kreis?

  • * Link entfernt , weil existiert nicht mehr *

    Da ist mit HTML oder Javascript oder jQuery scrollen .

    Ist alles eingebaut.

    Teste mal.


    EDIT: Bei allen drei Versionen kannst du den Sprung oder Scroll Punkt bestimmen

  • Das mit dem window.scrollTo(x,y) funktioniert bestens Basti!!! Sehr gut!!

    Klappt das auch mit meinem svg-circle?

    Der hat eine eigene id=“Kreis“.

    Dann so: window.scrollTo(“Kreis“).

    Ich kann’s erst morgen weiter probieren.

  • Es gibt mehrere möglichkeiten.

    Was du geschrieben hast geht so leider ncht. Aber fast.

    Man könnte es so machen .

    Code
    <a href="javascript:void(0)" onclick="window.scrollTo(document.getElementById('kreis').offsetLeft,document.getElementById('kreis').offsetTop)">ZumBallScrollen</a>

    Kannst du auch im obrigen Link testen.

    Mit den Code Scrollt er nach alles was eine id haben kann.


    So springt er da hin . Wenn er scrollen soll müssen wir jqery nehmen ,oder einen komplizierteren JS Code

  • Natürlich geht das auch mit der ID. Tausch bei Bastis codepen den ersten Versuch hiermit aus:

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


    Wie oben erwähnt, geht das mit allem. Acker dich durch den verlinkten Thread. Da steht das alles ;)
    https://codepen.io/CTS-X/pen/rdLMaB

    Edit: zum scrollen statt Springen: (jQuery)

    Code
    $('html,body').animate({scrollTop: jQuery('#kreis').offset().top}, 1000);


    Auch das in Bastis codepen einzubauen. Klappt bestens!
    https://codepen.io/CTS-X/pen/MVejgd

  • hmmm habe es jetzt so und es funktioniert nicht :(



    <html>

    <head>

    <script>

    function myFunction() {

    document.getElementById("kreis").scrollIntoView()

    }

    </script>

    </head>

    <body>


    <h1>My first SVG</h1>

    <input type="button" value="KLICK" onclick="myFunction();"/><br><br>

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

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

    </svg>


    </body>

    </html>

  • PROBIERES MAL SO RUM:

    Weil das Script kann, die ID nicht finden die noch nicht da ist. Hoffe die Erklärung wahr richtig.

    * Link entfernt , weil existiert nicht mehr *

  • Den kreis meinte ich selber nicht.Den konnte mann nicht sehen weil seine Werte in den svg nicht stimmten.

    Code
    <svg id="kreis" width="100" height="100">
    <circle cx="500" cy="1500" r="40" stroke="green" stroke-width="4" fill="yellow" />
    </svg>

    Den Kreis habe ich in unseren Fall erst mal so sichbar gemacht

    Code
    <svg id="kreis" width="200" height="200">
    <circle cx="60" cy="60" r="40" stroke="green" stroke-width="4" fill="yellow" />

    Weil bei ihn wahr die x und y achse weit aus den 100 x 100 Feld raus.Den konnte man ja nicht sehen.


    Aber das Script wahr trotzdem an der falschen stelle

  • Es funktioniert weder mit der Funktion Los() hinter dem div-Block im Body noch mit Los() im head. Die Karte und die Markierung werden gezeigt, aber es wird nicht dorthin gescrollt.

    <html>

    <head>


    <style type="text/css">

    .under {

    position: absolute;

    left: 0px;

    top: 400px;

    z-index: -1;

    }


    .over {

    position: absolute;

    left: 0px;

    top: 400px;

    z-index: -1;

    opacity: 1;

    }

    </style>



    </head>

    <body>


    <div align="center">

    <img class="img-a" src="images\Logo.png" width="230" height="138"><br><br>

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

    <img id="Karte" src="images\Karte.svg" width="1204" height="1300" class="under" style="visibility:hidden" />

    <svg id="Markierung" width="1204" height="1300" class="over" style="visibility:hidden"> <circle id="Kreis" cx="380" cy="310" r="20" stroke-width="5" stroke="red" fill="red" fill-opacity="0.5" /></svg>

    </div>


    <script>

    function Los() {

    document.getElementById("Karte").style.visibility = "visible";

    document.getElementById("Markierung").style.visibility = "visible";

    document.getElementById("kreis").scrollIntoView()

    }


    </script>

    </body>

    </html>

Jetzt mitmachen!

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