Serendipity Forums

Posted: **Tue Feb 27, 2018 5:30 pm**

Ich kann es irgendwie gar nicht wirklich glauben, doch meine Suche nach einem "scroll to top" Plugin blieb erfolglos. Genauso die Suche hier im Forum.

Gerade auf Smartphones werden Blogs oft unendlich lang und während man interessehalber immer weiter nach unten scrollt möchte man irgendwann wieder an den Seitenanfang. Dafür stehen in vielen Systemen scroll to top buttons zur Verfügung, die jeweils halbtransparent am unteren Bildschirmrand eingeblendet werden und da stehen bleiben. Ich nehme an, Ihr wisst was ich meine.

Gibt es das wirklich nicht für Serendipity?

Posted: **Tue Feb 27, 2018 7:20 pm**

Be@t wrote:Gibt es das wirklich nicht für Serendipity?

Ein entsprechendes Plugin gibt es tatsächlich nicht.

Abgesehen davon, dass es natürlich immer einen Plugin-Entwickler und einen Bedarf (meines Wissens bist Du der allererste, der hier im Forum nach so etwas fragt) braucht, versuchen wir ja immer, die Anzahl der Plugins überschaubar zu halten und möglichst Funktionalitäten sinnvoll zu kombinieren. Anders gesagt: Für eine solche Kleinigkeit würde man in der s9y-Welt kein Plugin schreiben, das wäre quasi „Ressourcenverschwendung“. (Was nicht heißen soll, dass man es nicht in ein passendes Plugin integrieren könnte, nur würde man dafür halt eher kein eigenes Plugin schreiben bzw. hat noch niemand getan.)

Ich weiß, dass z.B. das Timeline-Theme sowas integriert hat, und so finde ich es auch sinnvoller eingebunden (im Theme). Gleichzeitig heißt das aber natürlich, dass der Theme-Autor es einbinden muss. Da wir generell im Bereich Theme-Autoren ziemlich dünn besetzt sind, gibt es naturgemäß auch wenig moderne Themes und noch weniger, die so einen „elevator button“ haben (ich glaube, Timeline ist wirklich das Einzige).

Ich für meinen Teil habe bei meinen Themes bisher auf sowas verzichtet, weil ich es – offen gesagt – überflüssig finde. In iOS-Browsern kann man einfach auf den Bereich oberhalb der Adresszeile tappen, dann scroll iOS nach oben. Ich gehe davon aus, dass das in Android-Browsern nicht anders ist?

YL

Posted: **Wed Feb 28, 2018 11:08 am**

Ich gebe Dir vollkommen recht. Die beste Lösung wäre eine Integration in das Template. Kann doch nicht so schwierig sein...

Hier habe ich auch eine Anleitung mit entsprechendem Code gefunden https://www.w3schools.com/howto/howto_j ... to_top.asp. Da ich keine Programmierkenntnisse habe frage ich mich nun natürlich, wo ich die entsprechenden Codes einfügen muss.

Ich verwende das Skeleton-Template (mit Fork).
Den HTML-Teil in: ???
Den CSS-Teil in: user.css ?
Den JavaScript-Teil in: ???

Es wäre natürlich super, wenn Du mir die entsprechenden Dateien nennen könntest, dann würde ich das bestimmt irgendwie hinkriegen. Wenn nicht, dann lass ich es halt bleiben.

PS: Am Android-Handy habe ich keine "to top" Möglichkeit gefunden. Egal wo ich hintippe, da scrollt nichts automatisch zum Seitenanfang (weder mit Chrome noch mit Firefox).

Posted: **Wed Feb 28, 2018 3:14 pm**

Be@t wrote:Da ich keine Programmierkenntnisse habe frage ich mich nun natürlich, wo ich die entsprechenden Codes einfügen muss.

Code von w3schools fügt man normalerweise am besten in die Mülltonne ein, das ist auch hier nicht anders. (w3schools ist tatsächlich relativ verrufen und nicht unbedingt eine seriöse Quelle.)

Be@t wrote:Ich verwende das Skeleton-Template (mit Fork).

Sehr wichtiger Zusatz, prima. Tatsächlich wirst Du ein bisschen HTML, ein bisschen CSS und ein bisschen JS für sowas brauchen.

Das HTML für den Button kommt in die index.tpl – die ist quasi der „Rahmen“ für alle anderen Template-Dateien. Aber zunächst einmal musst Du dort ein „Scrollziel“ einfügen, also einen sogenannten Anchor, damit das JavaScript (im wahrsten Sinne des Wortes) weiß, wo die Reise hin geht. Ergo änderst Du Zeile 29 der index.tpl wie folgt:

Code: Select all

<body id="top">

und fügst dann in der index.tpl vor dem <footer> folgende Zeile ein:

Code: Select all

<a href="#top" class="button" id="go-to-top">^</a>

Das CSS kannst Du in die user.css oder in die style.css schreiben – bei einem Fork ist das im Prinzip egal. Wenn Du Deine eigenen Styles bisher in der user.css hast, nimm ruhig die.

Code: Select all

#go-to-top {
    background-color: #fff;
    position: fixed;
    right: 1rem;
    bottom: 1rem;
    z-index: 100;
}

(Mag sein, dass Du den Button anders stylen möchtest, ich habe jetzt mal sinnvoll zu Skeleton passende Styles für den Anfang gewählt.)

Beim Javascript wird's lustig, denn Skeleton kommt eigentlich ganz ohne JS aus. Du musst also eine Datei dafür anlegen und einbinden. Lege in /templates/<NAME_DEINES_FORKS>/ eine Datei namens theme.js an füge zunächst in der index.tpl nach dem schließenden </footer> folgende Zeile ein:

Code: Select all

<script src="{serendipity_getFile file="theme.js"}"></script>

Die soeben angelegte theme.js befüllst Du wie folgt:

Code: Select all

(function($) {
    $('#go-to-top').click(function(e) {
        e.preventDefault();
        $("html, body").animate({ scrollTop: 0 }, 250);
    });
})(jQuery);

Schön alles speichern und uploaden und dabei nix vergessen, ggf. den Template-Cache mal leeren und dann sollte das klappen. Bei Fragen einfach fragen.

YL

Posted: **Wed Feb 28, 2018 7:33 pm**

P E R F E K T !

Vielen Dank! Hab den Button entsprechend meinem Farbschema noch etwas angepasst und nun finde ich das einfach SPITZE!

Zwei Details:
1. Der Button ist immer sichtbar. Schon bevor man scrollt. Macht aber gar nichts.
2. Google Chrome scheint ein Problem damit zu haben. Weder am PC noch auf dem Android-Handy zeigt Chrome den Button. Mit Firefox (was ich bevorzuge) und MS-Edge klappt es ohne Probleme.

Nochmals: Vielen Dank!

PS: Ist Deine Amazon-Wishlist noch aktuell? Möchte mich gerne erkenntlich zeigen.

PPS: Falls das sonst noch jemanden interessiert: Mit einem Klick auf die WWW-Kugel in meinem Profil kommt man auf meinen Blog und so kann man sich den scroll-to-top-button ansehen.

Posted: **Thu Mar 01, 2018 10:17 am**

Be@t wrote:1. Der Button ist immer sichtbar. Schon bevor man scrollt. Macht aber gar nichts.

Klar, das braucht einfach mehr JS, als ich hier mal eben in 5 Minuten runterschreiben kann. Auf https://blog.kulturbanause.de/2012/04/b ... it-jquery/ gibt es z.B. eine Anleitung. Bitte stets beachten: Du musst jQuery nicht einbinden, das tut s9y schon von sich aus.

Be@t wrote:2. Google Chrome scheint ein Problem damit zu haben.

Kann ich nicht reproduzieren, Chrome 64/Mac zeigt den Button; ich sehe auch auf den ersten Blick nichts im CSS, was dagegen spräche.

Be@t wrote:Nochmals: Vielen Dank!

Gern geschehen.

Be@t wrote:PS: Ist Deine Amazon-Wishlist noch aktuell?

Immer.

YL

Posted: **Thu Mar 01, 2018 12:11 pm**

Nochmals DANKE!

Ich habe es kurz mit dem Kulturbanause-Skript versucht, jedoch nicht hingekriegt. Ich lasse es jetzt so, dass der Button immer eingeblendet ist. Stört mich überhaupt nicht.

Kann bestätigen, dass der Button auch mit Chrome angezeigt wird. Hatte wohl gestern Tomaten auf den Augen.

Soweit also alles gut.

PS: Du kriegst bald Post.

Serendipity Forums

scroll to top

scroll to top

Re: scroll to top

Re: scroll to top

Re: scroll to top

Re: scroll to top

Re: scroll to top

Re: scroll to top