# Back-to-Top Button erstellen **URL:** \ **Category:** Themes & Design\ **Created:** [7. Juni 2015 um 22:08 UTC](https://forum.shopware.com/t/back-to-top-button-erstellen/27949 "2015-06-07T22:08:32Z")\ **Posts on this page:** 20\ **Page:** 1
**Author:** ![ffinkelm](https://avatars.discourse-cdn.com/v4/letter/f/fbc32d/32.png) [@ffinkelm](https://forum.shopware.com/u/ffinkelm)\ **Post date:** [7. Juni 2015 um 22:08 UTC](https://forum.shopware.com/t/back-to-top-button-erstellen/27949/1 "2015-06-07T22:08:32Z")
Hi Comunity, wie so oft, stehe ich leider wieder etwas auf’m Schlauch und hoffe, ihr könnt mir weiter helfen. Ich möchte einen einfachen Back-to-Top Button erstellen. Dazu habe ich bisher angelegt, [list=1]neue javascript Datei (aus dem Netz, öffentlich! siehe [Scroll to top](http://www.paulund.co.uk/how-to-create-an-animated-scroll-to-top-with-jquery)) in meintheme\frontend\_public\src\js\scrollToTop.js [list=2]neue css meintheme\frontend\_public\src\css\scrollToTop.css [list=3]neues Image in \meintheme\frontend\_public\src\img\icons\Arrow-Up.png [/list][/list][/list] und ebenfalls eingebunden jquery.min.js in meintheme\frontend\_public\src\js. Die javascript Dateien eingebunden in meintheme\Theme.php: `protected $javascript = array( 'src/js/jquery.min.js', 'src/js/scrollToTop.js', );` Code css, auch eingebunden über Theme.php (`protected $css = array( 'src/css/scrollToTop.css' );` scrollToTop.css: `.scrollToTop{ width:100px; height:130px; padding:10px; text-align:center; background: whiteSmoke; font-weight: bold; color: #444; text-decoration: none; position:fixed; top:75px; right:40px; display:none; background: url("../../img/icons/Arrow-Up.png")no-repeat 0px 20px} .scrollToTop:hover{ text-decoration:none; }` und schlussendlich Aufruf über index.tpl (in meintheme\frontend\index\index.tpl): `[Scroll To Top](#)` Leider funktioniert das ganze nicht, noch nicht mal der Aufruf erfolgt, was mache ich falsch?? Ich würde mich sehr über Hilfe freuen!! Gruß ---
**Author:** ![regentanker](https://avatars.discourse-cdn.com/v4/letter/r/50afbb/32.png) [@regentanker](https://forum.shopware.com/u/regentanker)\ **Post date:** [8. Juni 2015 um 10:41 UTC](https://forum.shopware.com/t/back-to-top-button-erstellen/27949/2 "2015-06-08T10:41:43Z")
Mal ganz naiv gefragt: In Deiner CSS steht „display: none;“, ist es da nicht logisch, dass es nicht angezeigt wird? ---
**Author:** ![benblub](https://avatars.discourse-cdn.com/v4/letter/b/ebca7d/32.png) [@benblub](https://forum.shopware.com/u/benblub)\ **Post date:** [8. Juni 2015 um 14:27 UTC](https://forum.shopware.com/t/back-to-top-button-erstellen/27949/3 "2015-06-08T14:27:01Z")
Ich hab das hier mal kurz als Plugin umgesetzt: [https://tcgshop.ch/shopware5/](https://tcgshop.ch/shopware5/) (evtl hilft dir das ja so schon) Ansonsten lade ich es gerne im Store zum kostenlosen Download hoch. (Freischalten dauert aber sicher wieder ein wenig) ---
**Author:** ![Tanny](https://avatars.discourse-cdn.com/v4/letter/t/dfb087/32.png) [@Tanny](https://forum.shopware.com/u/Tanny)\ **Post date:** [8. Juni 2015 um 14:58 UTC](https://forum.shopware.com/t/back-to-top-button-erstellen/27949/4 "2015-06-08T14:58:19Z")
[quote=„benblub“]Ansonsten lade ich es gerne im Store zum kostenlosen Download hoch. (Freischalten dauert aber sicher wieder ein wenig)[/quote] :thumbup: 🙂 ---
**Author:** ![ffinkelm](https://avatars.discourse-cdn.com/v4/letter/f/fbc32d/32.png) [@ffinkelm](https://forum.shopware.com/u/ffinkelm)\ **Post date:** [8. Juni 2015 um 15:10 UTC](https://forum.shopware.com/t/back-to-top-button-erstellen/27949/5 "2015-06-08T15:10:13Z")
[quote=„jonas3301“]Mal ganz naiv gefragt: In Deiner CSS steht „display: none;“, ist es da nicht logisch, dass es nicht angezeigt wird?[/quote] Danke Dir für den Hinweis, da habe ich nicht drauf geachtet, der Code ist ja so fertig gewesen. Wobei ich nicht denke, dass es daran liegt, da der Aufruf selbst schon nicht funktioniert. Gruß Frank ---
**Author:** ![benblub](https://avatars.discourse-cdn.com/v4/letter/b/ebca7d/32.png) [@benblub](https://forum.shopware.com/u/benblub)\ **Post date:** [8. Juni 2015 um 15:44 UTC](https://forum.shopware.com/t/back-to-top-button-erstellen/27949/6 "2015-06-08T15:44:17Z")
[http://store.shopware.com/detail/index/sArticle/162223](http://store.shopware.com/detail/index/sArticle/162223) Allerdings kommt gleich noch ein Update also am besten noch kurz auf Version 1.0.1 warten + Fix Off-Canvas-Menu Fehler + add LESS + add Plugin Config (Background Color, Padding, Right & Bottom Abstände) Die Frage bleibt ob der Btn für generell ab Smartphone ausgeblendet werden soll, bin mir da gerade nicht ganz sicher, evetuell hau ich das später auch noch in die Config… ---
**Author:** ![benblub](https://avatars.discourse-cdn.com/v4/letter/b/ebca7d/32.png) [@benblub](https://forum.shopware.com/u/benblub)\ **Post date:** [8. Juni 2015 um 15:56 UTC](https://forum.shopware.com/t/back-to-top-button-erstellen/27949/7 "2015-06-08T15:56:43Z")
Update im Store ist erfolgt. Wäre super wenn Ihr euch kurz die Zeit nehmt und eine Bewertung hinterlasst. ---
**Author:** ![Scheibes](https://avatars.discourse-cdn.com/v4/letter/s/ee59a6/32.png) [@Scheibes](https://forum.shopware.com/u/Scheibes)\ **Post date:** [8. Juni 2015 um 16:23 UTC](https://forum.shopware.com/t/back-to-top-button-erstellen/27949/8 "2015-06-08T16:23:53Z")
Da soll wahrscheinlich nicht so sein, dass der Button hinter den Produktbildern angezeigt wird, oder? ---
**Author:** ![trixx](https://avatars.discourse-cdn.com/v4/letter/t/b5e925/32.png) [@trixx](https://forum.shopware.com/u/trixx)\ **Post date:** [8. Juni 2015 um 16:32 UTC](https://forum.shopware.com/t/back-to-top-button-erstellen/27949/9 "2015-06-08T16:32:53Z")
Erstmal danke für das kostenlose Plugin! :thumbup: 🙂 Das der Button hinter den Produktbildern angezeigt wird, ist mir auch gerade aufgefallen. Cool wäre es aber evtl. wirklich wenn dieser ab Smartphone ganz ausgeblendet werden würde. Oder konfigurierbar, dass man selber wählen kann ob anzeigen oder nicht. Auf´m Smartphone ist man ja eigentlich eh schnell wieder oben angelegt, mit einmal übern Bildschirm wischen. ---
**Author:** ![benblub](https://avatars.discourse-cdn.com/v4/letter/b/ebca7d/32.png) [@benblub](https://forum.shopware.com/u/benblub)\ **Post date:** [8. Juni 2015 um 16:34 UTC](https://forum.shopware.com/t/back-to-top-button-erstellen/27949/10 "2015-06-08T16:34:44Z")
Nein das sollte nicht so sein, werde ich gleich beheben^^. Da kostenlos habe ich mir die Zeit gespart um alles zu testen, aber sehr gerne behebe ich Fehler die gefunden werden. ---
**Author:** ![benblub](https://avatars.discourse-cdn.com/v4/letter/b/ebca7d/32.png) [@benblub](https://forum.shopware.com/u/benblub)\ **Post date:** [8. Juni 2015 um 16:36 UTC](https://forum.shopware.com/t/back-to-top-button-erstellen/27949/11 "2015-06-08T16:36:01Z")
Ausblenden am Smartphone add ich ebenfalls gerne dazu. ---
**Author:** ![Scheibes](https://avatars.discourse-cdn.com/v4/letter/s/ee59a6/32.png) [@Scheibes](https://forum.shopware.com/u/Scheibes)\ **Post date:** [8. Juni 2015 um 16:38 UTC](https://forum.shopware.com/t/back-to-top-button-erstellen/27949/12 "2015-06-08T16:38:21Z")
Perfekt! Danke für das kostenlose Plugin! 🙂 ---
**Author:** ![ffinkelm](https://avatars.discourse-cdn.com/v4/letter/f/fbc32d/32.png) [@ffinkelm](https://forum.shopware.com/u/ffinkelm)\ **Post date:** [8. Juni 2015 um 16:42 UTC](https://forum.shopware.com/t/back-to-top-button-erstellen/27949/13 "2015-06-08T16:42:16Z")
Hallo benblub, ich konnte den Fehler bei mir ausfindig machen, dank deiner Hilfe! :thumbup: Javascript wurde nicht geladen, es muss wohl direkt angefeuert werden -wie in deinem Beispiel. Aber was Du da jetzt anbietest ist echt der Hammer, Respekt und Danke!!! 🙂 Als kleine Anregung vielleicht jquery.min.js lokal einbinden, spart Traffic 😉 Gruß ---
**Author:** ![benblub](https://avatars.discourse-cdn.com/v4/letter/b/ebca7d/32.png) [@benblub](https://forum.shopware.com/u/benblub)\ **Post date:** [8. Juni 2015 um 16:58 UTC](https://forum.shopware.com/t/back-to-top-button-erstellen/27949/14 "2015-06-08T16:58:28Z")
Plugin updated, 1.0.3 + add Z-Index + add ausblenden in SmartphoneView [quote]Als kleine Anregung vielleicht jquery.min.js lokal einbinden, spart Traffic ;)[/quote] Adde ich dann in Version 1.0.4 😉 ---
**Author:** ![trixx](https://avatars.discourse-cdn.com/v4/letter/t/b5e925/32.png) [@trixx](https://forum.shopware.com/u/trixx)\ **Post date:** [8. Juni 2015 um 18:22 UTC](https://forum.shopware.com/t/back-to-top-button-erstellen/27949/15 "2015-06-08T18:22:44Z")
Hey, in der aktuellen Version 1.0.3 hängt jetzt der Button wieder über dem OFF-Canvas und zudem auch über der Fullscreen-Ansicht auf der Artikeldetailseite. Thx dass Du das mit dem ausblenden auf dem Smartphone so schnell eingebaut hast. :thumbup: ---
**Author:** ![benblub](https://avatars.discourse-cdn.com/v4/letter/b/ebca7d/32.png) [@benblub](https://forum.shopware.com/u/benblub)\ **Post date:** [8. Juni 2015 um 20:57 UTC](https://forum.shopware.com/t/back-to-top-button-erstellen/27949/16 "2015-06-08T20:57:18Z")
[quote]Als kleine Anregung vielleicht jquery.min.js lokal einbinden, spart Traffic ;)[/quote] Version 1.0.4 Update 1.0.4 + add JS Compiler + add the Plugin as SW5 Jquery Plugin + remove Jquery Files from Plugin Jquery ist nun komplett aus dem Plugin rausgeflogen, SW5 bringt ja von Hause aus schon Jquery mit. Das Plugin wurde soweit umgeschrieben das kein weiters einbinden von Jquery mehr notwendig ist. [https://devdocs.shopware.com/developers … ry-plugins](https://devdocs.shopware.com/developers-guide/shopware-5-plugin-update-guide/#write-own-jquery-plugins) Test: [https://tcgshop.ch/shopware5/plugins/](https://tcgshop.ch/shopware5/plugins/) In der aktuellen Version wird das Plugin allerdings nicht mehr auf der Indexseite gefeuert was ich aktuell noch nicht ganz verstehe, ist aber auch schon Abend mit 3 Feierabend Bierchen 😃 [quote]in der aktuellen Version 1.0.3 hängt jetzt der Button wieder über dem OFF-Canvas und zudem auch über der Fullscreen-Ansicht auf der Artikeldetailseite.[/quote] Das muss ich mir mal anschauen und werde dies dann auch beheben, über nen Screen wäre ich froh um schneller zu finden was du genau meinst. ---
**Author:** ![benblub](https://avatars.discourse-cdn.com/v4/letter/b/ebca7d/32.png) [@benblub](https://forum.shopware.com/u/benblub)\ **Post date:** [9. Juni 2015 um 10:57 UTC](https://forum.shopware.com/t/back-to-top-button-erstellen/27949/17 "2015-06-09T10:57:55Z")
Update auf 1.0.5 + add Image upload via MediaManager to Plugin Config + remove Button Text ---
**Author:** ![trixx](https://avatars.discourse-cdn.com/v4/letter/t/b5e925/32.png) [@trixx](https://forum.shopware.com/u/trixx)\ **Post date:** [9. Juni 2015 um 11:55 UTC](https://forum.shopware.com/t/back-to-top-button-erstellen/27949/18 "2015-06-09T11:55:10Z")
[quote=“benblub”] Das muss ich mir mal anschauen und werde dies dann auch beheben, über nen Screen wäre ich froh um schneller zu finden was du genau meinst.[/quote] Hi, sicher, folgend zwei Screens. Aktuelle Version 1.0.5 vom Plugin ist installiert. [Screen 1](http://awesomescreenshot.com/0f34yune7b) [Screen 2](http://awesomescreenshot.com/02c4yuob78) Gruß ---
**Author:** ![benblub](https://avatars.discourse-cdn.com/v4/letter/b/ebca7d/32.png) [@benblub](https://forum.shopware.com/u/benblub)\ **Post date:** [9. Juni 2015 um 17:31 UTC](https://forum.shopware.com/t/back-to-top-button-erstellen/27949/19 "2015-06-09T17:31:11Z")
ahh danke Trixx, Plugin Update 🙂 1.0.6 + Anzeige des Buttons nur noch im Listing Auf der Indexseite und im Blog könnte ich noch adden, denke aber im Listing bei den Produkten macht es am meisten Sinn… ---
**Author:** ![trixx](https://avatars.discourse-cdn.com/v4/letter/t/b5e925/32.png) [@trixx](https://forum.shopware.com/u/trixx)\ **Post date:** [9. Juni 2015 um 19:16 UTC](https://forum.shopware.com/t/back-to-top-button-erstellen/27949/20 "2015-06-09T19:16:38Z")
[quote=“benblub”]ahh danke Trixx, Plugin Update 🙂 1.0.6 + Anzeige des Buttons nur noch im Listing Auf der Indexseite und im Blog könnte ich noch adden, denke aber im Listing bei den Produkten macht es am meisten Sinn…[/quote] Kein Thema! 🙂 Sollte das denn jetzt schon in der 1.0.6 gefixt sein? Wenn ja, dann hat´s irgendwie nicht ganz geklappt, der Button hängt nämlich noch immer über dem Off-Canvas + der Fulscreenanischt. 😛 [Nächste Seite](https://forum.shopware.com/t/back-to-top-button-erstellen/27949.md?page=2)