scrollen zu Anker Tag?


  • FUXS
  • 2357 Aufrufe 7 Antworten

Diese Seite verwendet Cookies. Durch die Nutzung unserer Seite erklären Sie sich damit einverstanden, dass wir Cookies setzen. Weitere Informationen

  • scrollen zu Anker Tag?

    Hallo Leute,

    gibt es einen einfache Möglichkeit über einen Link zu einer bestimmten Stelle einer Seite zu scrollen statt zu springen?
    Ähnlich diesem Beispiel?

    Mit einem Link:
    <a href="seite.htm#ziel"><ZIEL></a>

    springe ich an ein gewünschtes Ziel mitten im Dokument wo ich den entsprechenden

    Anker Tag setze
    <a name="ziel"></a>

    Dieser Beitrag wurde bereits 1 mal editiert, zuletzt von FUXS ()

  • Hi,
    hmm... willst du also den Effekt des "automatischen Scrollens" haben?
    Da kommst du ohne JavaScript nicht weiter, denn du hast die HTML-Möglichkeiten in deinem Beispiel schon ausgeschöpft. (Btw. Anker ala a-Tag ist nicht mehr modern, heutzutage setzt man einfach eine id in dem gewünschten HTML-Element)

    Gruß
    Broken Sword

    Edit: So, ich habe da mal etwas vorbereitet:

    HTML-Quellcode

    1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
    2. "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
    3. <html xmlns="http://www.w3.org/1999/xhtml">
    4. <head>
    5. <title>ScrollTest</title>
    6. <script type="text/javascript">/*<![CDATA[*/
    7. var scrollData = {currentX:0,currentY:0,targetX:0,targetY:0,timer:0,speedX:0,speedY:0};
    9. function getOffsetPosition(item) {
    10. var parent = new Array(0,0);
    11. if(item.offsetParent) parent = getOffsetPosition(item.offsetParent);
    12. return new Array(item.offsetLeft+parent[0],item.offsetTop+parent[1]);
    14. }
    16. function goTo(id) {
    17. scrollData.currentX = window.pageYOffset || document.documentElement.scrollTop;
    18. scrollData.currentY = window.pageXOffset || document.documentElement.scrollLeft;
    19. var target = getOffsetPosition(document.getElementById(id));
    20. scrollData.targetX = target[0];
    21. scrollData.targetY = target[1];
    22. scrollData.speedX = Math.round((scrollData.targetX-scrollData.currentX)/150);
    23. scrollData.speedY = Math.round((scrollData.targetY-scrollData.currentY)/150);
    24. scrollData.timer = window.setInterval('goScroll()',1);
    25. }
    27. function goScroll() {
    28. if(scrollData.currentX >= scrollData.targetX && scrollData.currentY >= scrollData.targetY) {
    29. clearInterval(scrollData.timer);
    30. return 0;
    31. }
    32. if(scrollData.currentX < scrollData.targetX) window.scrollTo(scrollData.currentX+=scrollData.speedX,scrollData.currentY);
    33. if(scrollData.currentY < scrollData.targetY) window.scrollTo(scrollData.currentX,scrollData.currentY+=scrollData.speedY);
    34. }
    35. /*]]>*/</script>
    36. </head>
    37. <body>
    38. <div style="height:2000px">huhu <a href="javascript:goTo('thisid')">klick</a></div>
    39. <div id="thisid" style="margin-left:4000px">Hier bin isch</div>
    40. </body>
    41. </html>
    Alles anzeigen

    Getestet mit Opera,Fx,IE,Safari
    Auf dem Abstellgleis sah man ihn liegen,
    Auf dem Abstellgleis zwischen Schwelle und Gestein,
    Auf dem Abstellgleis im strömenden Regen,
    Auf dem Abstellgleis allein.

    Dieser Beitrag wurde bereits 6 mal editiert, zuletzt von Broken Sword ()

  • Wie schon gesagt, mit HTML ist so etwas nicht möglich.
    Geh doch einfach logisch an die Sache ran. Zum Beispiel, wie folgt:
    • Meine HTML-Seite in den Editor (oder halt dem Programm, mit dem du HTML-Seiten änderst) reinkopieren und erstmal testen.
    • Nun kucken, was du ändern musst, damit aus "goTo('thisid')" beispielsweise "goTo('ziel')" wird. Sprich einfach Sachen umbenennen, etc. Bei dem Script ist eigentlich nur der Link goTo('idEinesHtmlObjektektes') und natürlich die id, wo du hin scrollen willst zu ändern.
    • Dann den ganz Mus in deine Seite (natürlich ohne <html>, <title> und sowas) kopieren - anpassen (siehe Punkt 2) und Fertig


    Ganz einfach und brauchst auch keine JavaScript Kenntnisse oder sonstwas ;)

    Gruß
    BrokenSword
    Auf dem Abstellgleis sah man ihn liegen,
    Auf dem Abstellgleis zwischen Schwelle und Gestein,
    Auf dem Abstellgleis im strömenden Regen,
    Auf dem Abstellgleis allein.

  • uuuiihhhh - staun.... :confused: :confused: :confused:

    das funktioniert ja wirklich ... :D :D :D

    Danke! :) Danke! :) Danke! :)

    @Broken Sword

    Jetzt habe ich doch noch ne Frage.

    Kann ich mit Deinem Programm auch einen Link auf eine 2. Seite legen und an eine bestimmte Stelle Scrollen?

    Dieser Beitrag wurde bereits 1 mal editiert, zuletzt von Broken Sword () aus folgendem Grund: Doppelpost =&gt; Regeln lesen!

  • Hi,
    das ist leider nicht möglich. Außer, du hast in der verlinkten Seite ebenfalls so ein JavaScript-Code drin (+Erkennung, dass gescrollt werden soll - kann ich dir machen)
    Aber zum Beispiel auf externe Seiten, kannst du so nicht zugreifen.

    Gruß
    Broken Sword

    P.S.
    Lese dir doch bitte unsere Forenregeln bezüglich Mehrfachpostings durch ;)
    P.P.S
    Und nicht vergessen, wenn erledigt, Präfix umstellen: freesoft-board.to/f238/faq-wie…efix-umstellt-248151.html
    Auf dem Abstellgleis sah man ihn liegen,
    Auf dem Abstellgleis zwischen Schwelle und Gestein,
    Auf dem Abstellgleis im strömenden Regen,
    Auf dem Abstellgleis allein.