Ich habe im Rahmen des Updates unseres eigenen Shops einige Funktionen von früher mal neu umgesetzt und weitgehend updatesicher gemacht. Der »zurück nach oben«-Button gehört meiner Meinung nach zur Standard-Ausstattung eines modernen Shops. Anbei die lediglich 2 Dateien für diesen Button. Sobald der Anwender 250 Pixel (anpassbar) nach unten gescrolled hat wird der Button eingeblendet. Wenn er zurück nach oben scrolled verschwindet der Button wieder. Ein Klick auf den Back-»Back To Top«-Button transportiert den User per animiertem Scrolling zurück ans obere Seitenende. Der Button wird mittels CSS erzeugt und kann daher frei gestaltet werden. Geeignet für alle Shopversionen die usermod Dateien nutzen können Installationsanleitung liegt bei. Es werden lediglich 2 Dateien benötigt. eine JavaScript Datei für die Funktion und eine CSS Datei für das Design. Es muss kein html Code ins Template eingebaut werden und es werden keinerlei Shopdateien überschrieben. Daher absolut updatesicher. Die Dateien sind mit Kommentaren versehen um das Anpassen zu erleichtern. Have Fun
Hey Dennis, Danke, es ist kinderleicht einzubinden! Allerdings wenn ich den Button änder (trotz alles Caches leeren), erscheint nur ein Link auf der Shopseite ganz links unten UP? (habe den Text auf nach oben geändert) Code: .back-to-top { position: fixed; bottom:20px; right:20px; -moz-box-shadow:inset 0px 1px 0px 0px #bee2f9; -webkit-box-shadow:inset 0px 1px 0px 0px #bee2f9; box-shadow:inset 0px 1px 0px 0px #bee2f9; background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #63b8ee), color-stop(1, #468ccf)); background:-moz-linear-gradient(top, #63b8ee 5%, #468ccf 100%); background:-webkit-linear-gradient(top, #63b8ee 5%, #468ccf 100%); background:-o-linear-gradient(top, #63b8ee 5%, #468ccf 100%); background:-ms-linear-gradient(top, #63b8ee 5%, #468ccf 100%); background:linear-gradient(to bottom, #63b8ee 5%, #468ccf 100%); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#63b8ee', endColorstr='#468ccf',GradientType=0); background-color:#63b8ee; -moz-border-radius:6px; -webkit-border-radius:6px; border-radius:6px; border:1px solid #3866a3; display:inline-block; cursor:pointer; color:#14396a; font-family:Arial; font-size:16px; font-weight:bold; padding:7px 8px; text-decoration:none; text-shadow:0px 1px 0px #7cacde; } .back-to-top:hover { background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #468ccf), color-stop(1, #63b8ee)); background:-moz-linear-gradient(top, #468ccf 5%, #63b8ee 100%); background:-webkit-linear-gradient(top, #468ccf 5%, #63b8ee 100%); background:-o-linear-gradient(top, #468ccf 5%, #63b8ee 100%); background:-ms-linear-gradient(top, #468ccf 5%, #63b8ee 100%); background:linear-gradient(to bottom, #468ccf 5%, #63b8ee 100%); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#468ccf', endColorstr='#63b8ee',GradientType=0); background-color:#468ccf; } //* .back-to-top:active { position:relative; top:1px; } //*
Text ändern in der JavaSript datei ganz wichtig nach shop cache leeren browser cache da css und JS 1h nicht neugeladen werden STRG+F5 Wenn ich deine seite aufrufe is der button rechts unten wie er sein soll.
Hey Dennis, ein großes Dankeschön für die Dateien. Wir haben viele Texte zur Ernährung vom Hund zu lesen. So eine Funktion fehlte wirklich noch.
DANKE. Die Anleitung TOP!!! Kleine Anmerkung: Wenn man über bestcssbuttongenerator den einen individuellen Button erstellt, muss man auch in der JavaScript-Datei den Text ändern, sonst funktioniert es nicht.
Der Button Text ist NUR in der Javascript Datei - steht auch in Anleitung oder? Der Button generator gibt dir ja neben dem css auch einen html teil aus. diesen braucht man nicht, da ich den mittels der JS Datei einbaue, dadurch spart man sich den html teil auch einzubauen.
Hallo Dennis, erst einmal vielen Dank. Habe den Button mit dem Generator erstellt, wird auch angezeigt, aber links unten und stehend, habe alle Caches geleert. Was ist verkehrt bei mir?
Hallo Dennis, ich lade die 2 Dateien noch mal hoch und probier es nochmal. Bin mir aber fast sicher, dass ich alle Caches gelöscht habe. Schaun wir mal, fänd es schade, wenn es nicht klappen wird.
Wenn er links unten angezeigt wird wurde der Browser Cache nicht geleert, und somit das JS und CSS nicht neu im Browser geladen. Daher wurde der Button nicht formatiert dagestellt.
Also, bei Chrome lehrt man den Browserverlauf und das habe ich gemacht und den Cache im Shop geleert und trotzdem wird der Button, zwar vollständig, aber auf der linken Seite angezeigt. Er funktioniert auch, also wenn ich den anklicke scrollt es nach oben.
OK, du hast den Button neu gestaltet, dabei aber das ganze CSS überschrieben. Du darfst nur die Design Sachen ändern nicht die positionierung. Code: position: fixed; bottom:20px; right:20px;
Bei Hartwig klebt der Button unten links, funktioniert aber, wenn man drauf klickt. @ Hartwig: cache leeren in Chrome: weitere Tools -> Browserdaten löschen -> Bilder und Daten im Cache
Hallo Dennis, danke für die Antwort, das ist das was ich hochgeladen habe, .back-to-top { background:red; padding:1em; } */ .back-to-top { position: fixed; bottom:20px; right:20px; } .back-to-top { Und dann kommt das Design.
Mein Fehler, habe den slash und Stern raus genommen, vielen Dank für Eure Zeit und Geduld. Zu früh gefreut, jetzt funktioniert es nicht, also er scrollt nicht automatisch hoch.
So muss das CSS aussehen mit dem button wie er bei mir ist HTML: /* Hier das Design für deinen Back to Top Button erstellen # back-to-top-button.js 2012-01-26 gm # by Dennis Schmitz - Print-Weilburg.de # http://www.print-weilburg.de # Copyright (c) 2015 Print-Weilburg.de */ .back-to-top { /* Abschnitt für die Position des Buttons */ position: fixed; bottom:20px; right:20px; /* Abschnitt für ddas Design des Buttons */ -moz-box-shadow: 2px 2px 5px 0px #ff6f00; -webkit-box-shadow: 2px 2px 5px 0px #ff6f00; box-shadow: 2px 2px 5px 0px #ff6f00; background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #e8e8e8), color-stop(1, #000000)); background:-moz-linear-gradient(top, #e8e8e8 5%, #000000 100%); background:-webkit-linear-gradient(top, #e8e8e8 5%, #000000 100%); background:-o-linear-gradient(top, #e8e8e8 5%, #000000 100%); background:-ms-linear-gradient(top, #e8e8e8 5%, #000000 100%); background:linear-gradient(to bottom, #e8e8e8 5%, #000000 100%); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#e8e8e8', endColorstr='#000000',GradientType=0); background-color:#e8e8e8; -moz-border-radius:20px; -webkit-border-radius:20px; border-radius:20px; border:2px solid #000000; display:inline-block; cursor:pointer; color:#ffffff; font-family:Arial; font-size:17px; font-weight:bold; padding:15px 5px; text-decoration:none; text-shadow:2px 3px 5px #ff6600; } .back-to-top:hover { background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #000000), color-stop(1, #e8e8e8)); background:-moz-linear-gradient(top, #000000 5%, #e8e8e8 100%); background:-webkit-linear-gradient(top, #000000 5%, #e8e8e8 100%); background:-o-linear-gradient(top, #000000 5%, #e8e8e8 100%); background:-ms-linear-gradient(top, #000000 5%, #e8e8e8 100%); background:linear-gradient(to bottom, #000000 5%, #e8e8e8 100%); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#000000', endColorstr='#e8e8e8',GradientType=0); background-color:#000000; } hab das mal mit kommentaren getrennt
Hallo ich nochmal, also der Button ist da wird auch beim runterscrollen angezeigt. Wenn ich unten klicke scrollt er nicht noch oben. Muss ich noch an der js Datei was ändern?
Hmmm merkwürdig. Funktioniert er wenn du die dateien unbearbeitet übernimmst? Wel so auf anhieb is der code vorhanden und auch im Shop geladen.
Du hast das Button ACTIV aus dem Designer mit übernommen. Der abschnitt muss raus nur das vorhandene css anpassen keine neuen dazu machen. das .back-to-top:activ Den Teil weg