+ Antworten
Seite 1 von 2 1 2 LetzteLetzte
Ergebnis 1 bis 10 von 13

Thema: Smooth scroll zu Anker

  1. #1
    Verbringt hier viel Zeit
    Registriert seit
    16.10.2007
    Ort
    Leonberg
    Beiträge
    511
    Bedankte sich
    86
    Erhielt 2 Danksagungen
    in 2 Beiträgen

    Standard Smooth scroll zu Anker

    Hallo zusammen,
    ich suche gerade nach einer Möglichkeit um zu einem Anker auf meiner Webseite zu scrollen anstatt einfach dorthin zu springen.

    Dafür habe ich im HEAD folgendes Script eingebaut:
    Code:
    <script type="text/javascript">
    $(function() {
      $('a[href*="#"]:not([href="#"])').click(function() {
        if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
          var target = $(this.hash);
          target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
          if (target.length) {
            $('html, body').animate({
              scrollTop: target.offset().top
            }, 1000);
            return false;
          }
        }
      });
    });
    </script>
    Im Slider auf der Seite habe ich dann einen Link auf #Willkommen angelegt.
    Egal, was ich mache, bei einem Klick auf den Link, springt der Browser immer zum Anker und scrollt nicht...

    Kann mir jemand von euch einen Tip geben,was ich falsch mache?

    Gruß
    matthias
    kamageo.de - Dein Portal für Ausflugsziele in Deiner Umgebung.

  2. #2
    Gehört zum Inventar
    Registriert seit
    06.03.2013
    Ort
    /dev/random
    Beiträge
    5.987
    Bedankte sich
    129
    Erhielt 2.228 Danksagungen
    in 2.108 Beiträgen

    Standard

    Zitat Zitat von Hagen_Fenris Beitrag anzeigen
    Kann mir jemand von euch einen Tip geben,was ich falsch mache?
    Link zum Problem?
    Gruß FINWICK
    ↶ Danke Button nutzen, wenn es geholfen hat - Kein Support via PN - Tipps & Tricks - JPlugger - URL Shortener - NDE

  3. #3
    Verbringt hier viel Zeit
    Registriert seit
    16.10.2007
    Ort
    Leonberg
    Beiträge
    511
    Bedankte sich
    86
    Erhielt 2 Danksagungen
    in 2 Beiträgen

    Standard

    Hallo,
    direkt auf der Startseite von www.kamageo.de ist auf dem Slider ein Link "TEST".
    kamageo.de - Dein Portal für Ausflugsziele in Deiner Umgebung.

  4. #4
    Gehört zum Inventar
    Registriert seit
    06.03.2013
    Ort
    /dev/random
    Beiträge
    5.987
    Bedankte sich
    129
    Erhielt 2.228 Danksagungen
    in 2.108 Beiträgen

    Standard

    Stelle das Script vor das schließenden </head>, da wo du es hingemacht hast, ist zu dem Zeitpunkt jquery noch nicht geladen, daher erzeugst du da ein Scriptfehler.
    Geändert von FINWICK (18.03.2017 um 22:36 Uhr)
    Gruß FINWICK
    ↶ Danke Button nutzen, wenn es geholfen hat - Kein Support via PN - Tipps & Tricks - JPlugger - URL Shortener - NDE

  5. #5
    Verbringt hier viel Zeit
    Registriert seit
    16.10.2007
    Ort
    Leonberg
    Beiträge
    511
    Bedankte sich
    86
    Erhielt 2 Danksagungen
    in 2 Beiträgen

    Standard

    Hallo,
    ich hab das Script soeben für </head> gestellt.
    Leider springt der Browser trotzdem zu der stelle anstatt zu scrollen.
    kamageo.de - Dein Portal für Ausflugsziele in Deiner Umgebung.

  6. #6
    Gehört zum Inventar
    Registriert seit
    06.03.2013
    Ort
    /dev/random
    Beiträge
    5.987
    Bedankte sich
    129
    Erhielt 2.228 Danksagungen
    in 2.108 Beiträgen

    Standard

    Code:
    $(function() {
      $('a[href*="#"]:not([href="#"])').click(function() {
        if (location.pathname.replace(/^\//,'') == athis.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
          var target = $(this.hash);
          target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
          if (target.length) {
            $('html, body').animate({
              scrollTop: target.offset().top
            }, 200);
            return false;
          }
        }
      });
    });
    Bei 200ms nimmt das Auge dieses als Springen wahr. Hier musst du die Zeit entsprechend noch einstellen.
    Gruß FINWICK
    ↶ Danke Button nutzen, wenn es geholfen hat - Kein Support via PN - Tipps & Tricks - JPlugger - URL Shortener - NDE

  7. #7
    Verbringt hier viel Zeit
    Registriert seit
    16.10.2007
    Ort
    Leonberg
    Beiträge
    511
    Bedankte sich
    86
    Erhielt 2 Danksagungen
    in 2 Beiträgen

    Standard

    Hab den Wert soeben auf 2000 geändert...leider ist aber kein Unterschied zu erkennen.
    Geändert von Hagen_Fenris (20.03.2017 um 12:49 Uhr)
    kamageo.de - Dein Portal für Ausflugsziele in Deiner Umgebung.

  8. #8
    Gehört zum Inventar
    Registriert seit
    06.03.2013
    Ort
    /dev/random
    Beiträge
    5.987
    Bedankte sich
    129
    Erhielt 2.228 Danksagungen
    in 2.108 Beiträgen

    Standard

    Dein Anker muss die id="Weiterlesen" haben.
    Geändert von FINWICK (20.03.2017 um 19:27 Uhr)
    Gruß FINWICK
    ↶ Danke Button nutzen, wenn es geholfen hat - Kein Support via PN - Tipps & Tricks - JPlugger - URL Shortener - NDE

  9. #9
    Verbringt hier viel Zeit
    Registriert seit
    16.10.2007
    Ort
    Leonberg
    Beiträge
    511
    Bedankte sich
    86
    Erhielt 2 Danksagungen
    in 2 Beiträgen

    Standard

    Meinen Anker habe ich "Willkommen" genannt.
    Wenn ich mir den Quelltext des Beitrags anschaue, steht dort
    Code:
    <a name="Willkommen"></a>
    Als Link habe ich
    Code:
    <a href="#Willkommen">TEST</a>
    hinterlegt.
    kamageo.de - Dein Portal für Ausflugsziele in Deiner Umgebung.

  10. #10
    Gehört zum Inventar
    Registriert seit
    06.03.2013
    Ort
    /dev/random
    Beiträge
    5.987
    Bedankte sich
    129
    Erhielt 2.228 Danksagungen
    in 2.108 Beiträgen

    Standard

    Code:
    <a id="Willkommen" name="Willkommen"></a>
    Dein Anker muss die id="Weiterlesen" haben, du hast nur name="Weiterlesen" angegeben, dieses reicht für HTML, aber nicht für das Script.
    Gruß FINWICK
    ↶ Danke Button nutzen, wenn es geholfen hat - Kein Support via PN - Tipps & Tricks - JPlugger - URL Shortener - NDE

+ Antworten
Seite 1 von 2 1 2 LetzteLetzte

Lesezeichen

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein