Top Button einbauen

Gast 34250

Hallo Wordpress Freunde,

bin auf der Suche nach einem Top Button, also man ist auf einer Seite und immer weiter unten, und möchte zum Menü nach oben "springen".
Kennt jemand eine Lösung ohne ein Plug-in dafür zu nehmen?

Mag es ja wenn ich nicht so viele Plug-ins zu gebrauchen.

Danke für Eure Tipps

LG
Matrix

Werbepost

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

helix

Wenn ein Klick auf den nach-oben-Button wirklich ein Springen hervorrufen darf, ist es super einfach.
Wenn ein Klick auf den Button den Benutzer smart nach oben scrollen soll, brauchst du dafür JavaScript oder jQuery. Da ist man dann oft doch mit dem PlugIn schneller am Ziel.

Spring-Lösung nach oben ist eine Sprungmarke. Baue einen Link der zu einer ID am Seitenanfang springt. Dafür brauchst du meistens noch nicht einmal eine extra ID anzulegen, weil so etwas meistens im Quelltext schon da ist, z.B. #content (halt mal gucken / auslesen, was dein Theme dir anbietet).

Du kannst diesen Link absolut positionieren, so dass er sich z.B. immer im unteren Bereich deiner Seite befindet.

Gruß
helix

Gast 34250

Hallo Helix,

das einfach würde langen, hast Du ggf. eine Seite mit einer kurz Anleitung?

SuMu

Code

<a id="scroll-to-top" title="Beam me up, nach oben" href="#">▲</a>

oder Klick

Gast 34250

Hallo SuMu,

wieder einmal vielen Dank für Eure Hilfe.

Hatte an so etwas zwar gedacht, aber werden wohl ein Plug-in am Ende nehmen müssen, da ich mit dem Google Video nicht so weiter komme von SuMu.

http://elbnetz.com/unterschied-zw…-bei-wordpress/ Auf der Seite sieht man rechts irgendwann so einen Button einspringen den meine ich.

Danke für weitere Tipps.

SuMu

Hi Matrix, dann such dir einen aus, der noch aktuell ist + gute Bewertungen hat: https://de.wordpress.org/plugins/tags/back-to-top
Der vermutlich: https://de.wordpress.org/plugins/smooth-scroll-up/

maxe

rein theoretisch bräuchtest du im header ja nur einen Link auf ein Image deiner Wahl mit einer class zu setzen

HTML

<a class="scrollToTop"><img src="http://forum.wpde.org/design/design/..." /></a>

Die class formatierst du deinen Wünschen entsprechend in der style.css:

Code

.scrollToTop {
    position: fixed;
    bottom: 50px;
    right: 10px;
    display: none;
    z-index: 100;
    cursor: pointer;
}

und anschließend sprichst du dieses über ein jquery in der footer.php an:

Code

jQuery(document).ready(function(){


  // Img wird erst bei 250px eingeblendet
  jQuery(window).scroll(function(){
    if (jQuery(this).scrollTop() > 250) {
      jQuery('.scrollToTop').fadeIn();
    } else {
      jQuery('.scrollToTop').fadeOut();
    }
  });


  // Scrollt hoch bei Klick
  jQuery('.scrollToTop').click(function(){
    jQuery('html, body').animate({scrollTop : 0},800);
    return false;
  });


});

Alles anzeigen

Aber ein Plugin wird ja nix anderes machen, nur für dich viel einfacher zu handlen sein.

Willkommen! Melden Sie sich an oder registrieren Sie sich.

Top Button einbauen

Jetzt mitmachen!