"MACH DEINE SEITE JETZT FIT,
    UND SPRING' WOHIN DU WILLST!"

    Willst Du Deinen Besuchern ein schnelles Springen zu Textstellen oder Formularen auf Deiner Seite ermöglichen, so binde einfach folgenden Code in ein Widget/HTML-Modul ein:

    Bitte zum Link im Beispieltext

     (Hier habe ich beim Text unterhalb des Tutorials einen Anker gesetzt, zu dem Du jetzt springen kannst.)

    <a href="#zumBeispiel" class="scroll">zum Beispiel</a> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js">

    </script><script type="text/javascript" language="javascript">

    //<![CDATA[

     

     

    jQuery(document).ready(function($) {

     

            $(".scroll").click(function(event){            

                    event.preventDefault();

                    $('html,body').animate({scrollTop:$(this.hash).offset().top}, 500);

            });

    });

     

            //]]>

    </script>

    Dem Ziel (#zumBeispiel) kannst Du eine beliebige Bezeichnung geben. Diese muss natürlich im unteren Code identisch sein.

    Folgender Schnipsel muss ebenfalls in ein Widget/HTML-Modul eingefügt werden.

     

    <div id="zumBeispiel">
    </div>

     

    Diesen Code musst Du dort einfügen, wo der Besucher dann schnell "hinspringen" können soll.

    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.  

    Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.  

    Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.  

    Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.  

    Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis.  

    At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, At accusam aliquyam diam diam dolore dolores duo eirmod eos erat, et nonumy sed tempor et et invidunt justo labore Stet clita ea et gubergren, kasd magna no rebum. sanctus sea sed takimata ut vero voluptua. est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.  

    Consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus.  

    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.  

    Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.  

    Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.  

    Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo
    Kommentare: 25
    • #25

      Julian (Donnerstag, 07 September 2017 19:30)

      Hallo. Wie kann ich denn den Ankerlink setzen und er landet auf einer anderen Seite; in dem Fall: der Anfangslink ist auf einer Unterseite, und der Zielanker auf einem bestimmten Feld in der Hauptseite. Vielen Dank

    • #24

      Roland (Freitag, 11 November 2016 18:20)

      <a href="#zumBeispiel" class="scroll">zum Beispiel</a> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js">
      </script><script type="text/javascript" language="javascript">
      //<![CDATA[
       
       
      jQuery(document).ready(function($) {
       
              $(".scroll").click(function(event){            
                      event.preventDefault();
                      $('html,body').animate({scrollTop:$(this.hash).offset().top}, 500);
              });
      });
       
              //]]>
      </script>

    • #23

      Schild (Montag, 15 Februar 2016 14:22)

      Hallo,

      wollte fragen, ob Ihre einen Tip geben könntet, wie ich die Textfarbe 2016 Januar ändern kann. Vielen Dank

    • #22

      Norbert (Mittwoch, 09 Dezember 2015 09:19)

      Vielen Dank, für die Tips, das werde ich ausprobieren!

    • #21

      jay (Donnerstag, 19 November 2015 22:24)

      tut sich gar nicht, den ich kapiere nicht wo das ganze eingesetzt werden soll... vor allem wohin mit

      <div id="zumBeispiel">
      </div>

      ????

      bitte genauer erklären, nicht jeder ist html-versiert. :-)

    • #20

      Rudi (Sonntag, 05 Juli 2015 11:02)

      aber eintlich geht das hier genannte Beispiel auch ganz gut

    • #19

      Rudi (Freitag, 03 Juli 2015 14:49)

      probierts mal hier:
      http://www.redesign-berlin.de/jimdo-tutorials/verkn%C3%BCpfungen-links/bestimmte-elemente-anspringen-sprungmarken/

    • #18

      Ludwig Willimann (Mittwoch, 20 Mai 2015 09:46)

      So einfach und funktioniert top! Vielen Dank für dieses Tutorial.
      Grüsse, Ludwig

    • #17

      Leon (Montag, 18 Mai 2015 18:24)

      Super Tutorial! Funktioniert das "Springen" irgendwie auch mit den Buttons der Navigationsleiste?

    • #16

      Annette Kölln Kokolores aus der Kiste (Mittwoch, 18 März 2015 20:12)

      Vielen Dank für die Tipps!
      Habe es problemlos in meine Seite eingebaut und es funktioniert prächtig!
      VG
      Annette

    • #15

      Guenter (Dienstag, 17 Februar 2015 14:07)

      Sorry aber das ist kein Beispiel zum Verstehen. Ich kann weder erkennen
      - wo der Sprung genau landet
      - der Aufruf des Widget/HTML ist klar, aber ich will ja mit einem bestehenden Wort verankern. Ich möchte bei den Pflegeplätzen München das Wort "Puma" mittlerer Hund anklicken und dann beim Hund "Puma" auf der nächsten Seite mittig landen
      - mit diesem Beispiel kann ich leider nicht nachvollziehen wie das gehen soll
      - oder kann das einfach mal jemand von Euch so einrichten, dann kann ich mir das konkret ansehen.
      Danke

    • #14

      fan (Samstag, 14 Februar 2015 03:26)

      ich verstehe leider immer noch nicht wie das Funktioniert :(
      kannst Du bitte es besser erklären oder ein Video darüber machen?
      Danke im Voraus.

    • #13

      Gerit Bruns (Mittwoch, 07 Januar 2015 14:38)

      Hallo. Vielen Dank erstmal für die tolle Seite!!!
      Leider funktioniert es bei mir auch nicht so richtig. Ich habe einen Text in einer Tabelle. "Zum Shop", wie genau muss ich da das Widget setzen? Beim Shop kann ich es ja jeweils über oder unter das Produkt setzen, aber wie mache ich es in der Tabelle? Hast Du da einen Tipp für mich? Leider bin ich auch recht unerfahren :-((( Habe einiges ausprobiert, funktioniert nur leider nicht:-((

    • #12

      cherze-chaeller-lupfig (Freitag, 03 Oktober 2014 17:35)

      Hallo

      Herzlichen Dank für den Tipp. Das könnte ich gut gebrauchen, leider funktionierts bei mir nicht.

      Grüsse Frank

    • #11

      Thomas Witt (Montag, 22 September 2014 20:29)

      Wirklich gute Seite, wenn der Tag 48 Stunden hätte würde ich mich auch intensiver damit beschäftigen.
      Aber vorerst mal favorisiert, für dann, wenn mal mehr Zeit bleibt :)

      Schöne Grüße

    • #10

      mietwerkstatt-iserlohn (Montag, 07 April 2014 16:47)

      Echt eine top Seite, wenn man nur mehr Zeit hätte ...

      Weiter so, Gruss aus Iserlohn

    • #9

      paula (Montag, 20 Januar 2014 18:59)

      Hey, bei mir funktioniert zwar der Anker, jedoch springt er ganz schnell und nicht so geschmeidig wie auf deiner Seite.
      Kann mir jemand helfen?? :/

    • #8

      Deine Slideshow (Donnerstag, 14 November 2013 12:45)

      Hey danke für dein Feedback.. macht sich gut bei dir ;-)

      Viele Grüße.

    • #7

      fotos-wolf (Sonntag, 10 November 2013 07:09)

      Herzlichen Dank für die tollen Tipps. Ich habe den Anker auch auf diversen Seiten eingebaut und er klappt hervorragend.

    • #6

      Deine Slideshow (Montag, 07 Oktober 2013 12:41)

      Hehe.. das sieht schon cool aus. Müsste ich mich aber selber erst intensiver mit beschäftigen. Leider fehlt mir dazu einfach die Zeit im Moment :-)

      Viele Grüße.

    • #5

      Ralph Monshausen (Sonntag, 06 Oktober 2013 18:02)

      Hallo,
      super Seite! Ich habe die Ankerfunktion eingebaut. Funktioniert sensationell gut! Vor allem das einstellbare Skrollen. Danke für den tollen Code.
      Gruß Ralph Monshausen

      PS. Ich habe noch eine Frage. Weißt Du wie man das skrollen mit dem einfaden einer .png Datei verknüpfen kann? Das nennt man Parallaxen Skrolling. So wie in diesem Beispiel: <http://www.royalsandrice.com> ? Vielleicht kannst Du mir einen Tipp geben, wie man den Effekt erzielt.
      Gruß Ralph Monshausen

    • #4

      spielerrat (Mittwoch, 07 August 2013 11:38)

      Auf meiner Seite funktioniert das super! Danke für das Skript.

    • #3

      djknut (Dienstag, 30 Juli 2013 15:23)

      Ich hab das schon ausprobiert. Auch in verschiedenen Versionen unterschiedlichster Seiten. Leider kein Erfolg.

      Was ich erreichen möchte:
      Auf der einen Seite hab ich meine Mixe zum Anhören. Jetzt möchte ich aber, wenn ich einen neuen Mix poste, dass man auf dieser Seite auch direkt auf die Höhe dieses Mixes springen kann. Klar, der neueste ist immer oben. Das ist kein Problem.

      Wenn ich jetzt dann da aber mal 10 oder 15 Stück drauf habe und ich möchte zu Mix 7, dann landet man leider immer auf der Mix-Seite an oberster Stelle. Ich würde aber gerne genau dann bei Mix 7 rauskommen.

      Gibt es da evtl noch einen anderen Lösungsansatz?

      Grüße

    • #2

      Deine Slideshow (Montag, 29 Juli 2013 12:40)

      Musst Du mal ausprobieren/herumspielen.. das Beispiel hier ist für die gleiche Seite gedacht.

      Viele Grüße.

    • #1

      djknut (Freitag, 26 Juli 2013 20:01)

      Funktioniert das nur auf derselben Seite oder auch seitenübergreifend?

      Bei mir tut sich leider gar nichts.

      Grüße