Anker im Header-Menü verlinken

  • Theme: Tesseract
    Wordpressversion: .4.2–de_DE
    Url: Ich richte eine Webseite für einen Freund ein, der ein kleiners Unternehmen führt und hat mich gebeten keine Verlinkungen zu setzten, bevor sie vollständig ist.

    Hallo,

    ich möchte einen Ankerlink zu meinem header-Menü setzten, da ich am Ende meiner Webseite einen Button mit dem Text "zurück zum Anfang" habe. Ich habe schon einiges probiert, wie den Anker ganz oben in meinem Titelbild zu verlinken, was aber dazu geführt hat, dass der Anker nur bis kurz vor das header-Menü gesprungen ist.
    Beim nächsten Versuch habe ich den Anker-shortcode in meinen "Header Right Block Content" (hier kann man bottuncodes etc. einfügen) geschrieben. Leider ist dort schon ein Button/social iconcode und der Anker springt nicht nach ganz oben im Menü, wo er hin sollte.

    Hier mal der Code im "Header Right Block Content":

    PHP
    <p><a id="dafuq"></a><a class="button primary-button" href="#about">Los gehts!</a></p><p></p><p></p><p></p><p></p>[aps-social id="1"]

    Danke fürs durchlesen und evntl. fürs antworten. :D

    MfG aubers.

    • Anzeige

    Hallo!

    Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

    • ✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
    • ✔️ Deutsche Server & DSGVO-konform
    • ✔️ Persönlicher Support (kein 0815-Ticket-System)

    Mehr erfahren

  • du gibst dem Element welches mit klick das scrollen nach oben bewirken soll eine extra Class, z.B. .scrolltotop

    Danach erstellst du ein jQuery, welches bei Klick dass scrollen zum body ausführt, so in der Art:

    Code
    jQuery('.scrolltotop').click(function(){
      jQuery('html, body').animate({scrollTop : 0},800);
      return false;
    });

    [size=10]Bitte immer zuerst die Forensuche nutzen und erst danach Deine Fragen hier im Forum stellen, denn sehr vieles wurde schon mehrfach beantwortet. Bitte dabei auch die Forenregeln beachten.
    Kein Support per PN - Fragen gehören ins Forum.[/SIZE]
    [size=8]Wenn du eine weise Antwort verlangst, musst du vernünftig fragen. (Johann Wolfgang von Goethe)[/SIZE]

  • Hallo,

    Das Element was das Scrollen nach oben bewirken soll ist ein Button mit folgendem Code:

    Code
    <a class="button primary-button" href="#dafuq">zurück zum Anfang</a>


    Ich bin leider neu hier und habe wenig bis keine Ahnung von solchen css Befehlen. Ich denke mal, dass ich diesen mit großer Sicherheit flasche Code nicht einfach in meinen Bottuncode schreiben soll.

    PHP
    <body <?php body_class(scrollTop); ?>>
    </head>
    
    
     
    jQuery('.scrolltotop').click(function(){
      jQuery('html, body').animate({scrollTop : 0},800);
      return false;
    });


    Wie Sie sehen habe ich leider null Ahnung und bräuchte genauere Anweisungen. Vielen Dank für die Zeit die Sie sich nehmen!

  • Ich hatte doch geschrieben, gib dem a-Tag einfach noch eine zusätzliche Class. Danach den jquery einfach mal in die footer.php schreiben.

    [size=10]Bitte immer zuerst die Forensuche nutzen und erst danach Deine Fragen hier im Forum stellen, denn sehr vieles wurde schon mehrfach beantwortet. Bitte dabei auch die Forenregeln beachten.
    Kein Support per PN - Fragen gehören ins Forum.[/SIZE]
    [size=8]Wenn du eine weise Antwort verlangst, musst du vernünftig fragen. (Johann Wolfgang von Goethe)[/SIZE]

  • Also ich schreibe diesen Code irgendwo in meine footer.php

    PHP
    jQuery('.scrolltotop').click(function(){
      jQuery('html, body').animate({scrollTop : 0},800);
      return false;
    });


    und hier füge ich noch eine class hinzu ?

    Code
    <a class="button primary-button" href="#dafuq">zurück zum Anfang</a>

    also ungefähr so:

    Code
    <a class="button primary-button" class="scrollTop" href="#dafuq">zurück zum Anfang</a>
  • Code
    <a class="button primary-button scrollTop" href="#dafuq">zurück zum Anfang</a>

    [size=10]Bitte immer zuerst die Forensuche nutzen und erst danach Deine Fragen hier im Forum stellen, denn sehr vieles wurde schon mehrfach beantwortet. Bitte dabei auch die Forenregeln beachten.
    Kein Support per PN - Fragen gehören ins Forum.[/SIZE]
    [size=8]Wenn du eine weise Antwort verlangst, musst du vernünftig fragen. (Johann Wolfgang von Goethe)[/SIZE]

    Einmal editiert, zuletzt von maxe (28. Februar 2016 um 09:02)

  • Der Code bewirkt das Gleiche, wie der zuvor. Er scrollt nach oben zu dem spezifischem Anker. Ich hätte aber gerne, dass der Bottun ganz noch oben scrollt, also bis zu vollständigen Höhe der Webseite. D.h ich muss entweder ein Anker im Menü setzten, was ich aber nicht kann, oder ein css Befehl einbauen. Und hier liegt das Problem, ich weiß nicht wie so ein Befehel auszusehen hat. Ich habe mal von "do_action" Befehlen gehört, die das Scrollen nach oben bewirken können.

  • lass den href mal weg. Und das Script hast du richtig eingebunden, mit <script ...>?

    Das Geheimnis des Könnens liegt im Wollen!
    [size=12]Bitte keine Hilfegesuche per PN (auch keine "privaten" Links). Das ist ein öffentliches Forum.[/SIZE]

  • Nope habe ich nicht, er wurde eingefügt, so wie sie es vorher geschrieben haben. D.h der Code würde nun so aussehen?

    Code
    <a class="button primary-button <script scrollTop> >zurück zum Anfang</a>

Jetzt mitmachen!

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