Auf der Incomedia Website X5 Seite ist ein Scroll Top Button eingebunden. Es ist schade das die Funktion nicht direkt mit eingebaut wurde.
Wer wissen will wie das geht schaut mal in den Quelltext....
Ich habe das mal gemacht und ein wenig geändert und nun mal aufgeschrieben
HTML
- <script>
- _jq(function() {
- var elem = '<img onclick="return x5engine.utils.location(\'\')" id="ScrollToTop" alt="" style="cursor:pointer;position:fixed;bottom:15px;right:15px;display:none;z-index:102" src="data:image/png;base64,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" />';
- _jq("body").append(elem);
- _jq(window).scroll(function () {
- if (_jq(window).scrollTop() > 100) {
- _jq('#ScrollToTop').fadeIn();
- } else if (_jq(window).scrollTop() < 50) {
- _jq('#ScrollToTop').fadeOut();
- }
- });
- });
- </script>
Wie man sieht ist das Bild base64 codiert. Das kann man leicht selbst erledigen
Du nimmst dir dann dort den Bereich zwischen den "" von XHTML Image
also -->>> data:image/png;base64,......... und ersetzt obige Zeile damit.
Das codierte Bild oben stammt von Pixabay kann also verwendet werden
http://pixabay.com/de/icon-pfeil-nach-unten-runde-157360/
Der komplette Code kommt in den HEAD
also direkt vor dem schließenden /head