Back to TOP - im JTL-Shop 3.18 einbinden

deepblue

Sehr aktives Mitglied
2. Januar 2009
2.301
6
Hannover / Hamburg
Hallo,

habe es mittlereile schon in diversen JTL-Shops gesehen. Wie kann ich so einen Back-to-Top Button unten rechts mit einbauen?
Ein Logo im PNG Format, habe ich mir mittlerweile in Photoshop gebastelt. Wie funktioniert das nun mit den Button?

Bei southbridge gab es mal eine Anleitung dazu. Leider ist diese nicht mehr verfügbar! :)
 

deepblue

Sehr aktives Mitglied
2. Januar 2009
2.301
6
Hannover / Hamburg
AW: Back to TOP - im JTL-Shop 3.18 einbinden

Das nach oben Scrollen mit dem Button funktioniert nun. Nur leider wird der Button nicht wieder ausgeblendet, wenn man nach oben gescrollt hat.

Kann mir jemand sagen woran das liegt?
 

ram1

Sehr aktives Mitglied
22. Juli 2009
1.116
7
AW: Back to TOP - im JTL-Shop 3.18 einbinden

Wenn Du uns erstmal verrätst, wie Du das umgesetzt hast? Erst dann kann man schauen wo evtl. das Problem liegt ;)
 

deepblue

Sehr aktives Mitglied
2. Januar 2009
2.301
6
Hannover / Hamburg
AW: Back to TOP - im JTL-Shop 3.18 einbinden

über die page.css Datei

.scrollTo_top {
background: url("oben.png") center no-repeat;
transition: all 1s ease 0s;
bottom: 40px;
height: 35px;
display: block;
position: fixed;
right: 25px;
width: 35px;
border-radius:50%;
padding:5px;
}

Wie kann ich es anstellen, dass der Button ausgeblendet wird wenn man nach oben scrollt?
 

deepblue

Sehr aktives Mitglied
2. Januar 2009
2.301
6
Hannover / Hamburg
AW: Back to TOP - im JTL-Shop 3.18 einbinden

Vielen Dank erst einmal für die Infos. Leider scheint das mit dem Standard Tiny Template aber nicht richtig zu funktionieren. Bekomme zwar immer den Button angezeigt und das Scrollen funktioniert auch. Nur ausgeblendet wird der Button nicht.
 

casim

Sehr aktives Mitglied
26. Juni 2012
5.934
9
AW: Back to TOP - im JTL-Shop 3.18 einbinden

Wenns richtig eingebaut ist, klappt das mit jedem Template

Da du dich aber behaarlich sträubst, mal deinen gesamten code hier zu posten, können wir auch nicht helfen.

Das was du oben gepostet hast, ist nur das css für den Button

Wo ist das javascript dazu?

Wie und wo hast du es eingebaut, etc. etc.
 

r.wehser

Aktives Mitglied
6. Januar 2014
8
0
AW: Back to TOP - im JTL-Shop 3.18 einbinden

Hallo casim,

mir hat Dein Link sehr geholfen. Muss ich den folgenden Link auf allen Template-Seiten einbinden oder reicht es diesen in der header_custom.tpl einzufügen?

<a href="#top" id="top-link">Top of Page</a>
Bisher ist er nur in der header_custom.tpl und funktioniert auf der Startseite, sobald ich mich aber bspw. auf der Artikel-Seite bewege springt er nicht zum Seitenanfang sondern zur Startseite zurück...

VG
wesselow
 

r.wehser

Aktives Mitglied
6. Januar 2014
8
0
AW: Back to TOP - im JTL-Shop 3.18 einbinden

Hallo casim,

das Plugin kannte ich noch nicht.

Mein Code:
------------------------------------------------
css - in custom theme.css
------------------------------------------------
/* Back to top button */
#top-link {
display:none;
position:fixed;
right:19px;
top:19px;}

------------------------------------------------
js - in header_custom.tpl
------------------------------------------------
<script type="text/javascript">
jQuery.fn.topLink = function(settings) {
settings = jQuery.extend({
min: 1,
fadeSpeed: 700
}, settings);
return this.each(function() {
//listen for scroll
var el = jQuery(this);
el.hide(); //in case the user forgot
jQuery(window).scroll(function() {
if(jQuery(window).scrollTop() >= settings.min)
{
el.fadeIn(settings.fadeSpeed);
}
else
{
el.fadeOut(settings.fadeSpeed);
}
});
});
};


//usage w/ smoothscroll
jQuery(document).ready(function() {
//set the link
jQuery('#top-link').topLink({
min: 300,
fadeSpeed: 700
});
//smoothscroll
jQuery('#top-link').click(function(r) {
jQuery("html, body").animate({ scrollTop: 0 }, 500);
});
});
</script>


------------------------------------------------
html - in header_custom.tpl
------------------------------------------------
<a href="#top" id="top-link">Top of Page</a>

VG
wesselow
 
Ähnliche Themen
Titel Forum Antworten Datum
Beantwortet Header Top Bar kurze Darstellungsfrage [Erledigt] Templates für JTL-Shop 0
Neu Badges / Artikelsticker bei JTL Shop 5.3.0 Templates für JTL-Shop 0
Neu Bug Popup/eModal - JTL Shop 5.3 JTL-Shop - Fehler und Bugs 0
JTL Mahnwesen Workflow- Email nach 30 Tagen noch nicht bezahlt. JTL-Wawi 1.8 0
Neu Best Pratices Shopware - JTL - Buchhaltung User helfen Usern - Fragen zu JTL-Wawi 2
Neu JTL Ameise Extrem Langsam im Export JTL-Ameise - Fehler und Bugs 8
Wichtig 👉 Wichtiger Hinweis: JTL-eazyAuction Server Downtime am Dienstag, 02.04.2024 News, Events und Umfragen 0
Neu Wechsel WAWI Hosting von JTL mit RDP auf ecomDATA User helfen Usern - Fragen zu JTL-Wawi 2
JTL Worker Manueller Abgleich nicht möglich trotz deaktivierem Worker 2.0 JTL-Wawi 1.8 4
Neu JTL Shopify Connector und Billbee frage Shopify-Connector 0
Neu Nach Umstellung auf WMS Probleme mit der JTL Ameise Installation von JTL-WMS / JTL-Packtisch+ 0
Neu JTL Pos Sum-Up Rückgabe Allgemeine Fragen zu JTL-POS 0
Neu JTL Worker 2.0 und tinetbestellung Technische Fragen zu den JTL-Connectoren 0
Neu JTL-Shop 5.3 - Aktuell 5.3.1 Releaseforum 1
Neu JTL 1.8.12.0 - Artikelattribut für Shop importieren - Format CSV-Datei / Hilfe bei Import von individuellen Attributen für JTL-Shop (googlekat) JTL-Ameise - Ideen, Lob und Kritik 1
JTL Shop Gutscheine über JTL-Vouchers erstellen Allgemeine Fragen zu JTL-Vouchers 1
Neu JTL Connector zu SW6 auch als Testumgebung möglich ? Onlineshop-Anbindung 3
Neu Update des JTL shops aus der Wawi funktioniert nicht Allgemeine Fragen zu JTL-Shop 1
Neu JTL Shop Gutscheine über JTL-Vouchers erstellen Allgemeine Fragen zu JTL-Shop 0
Neu JTL zu Shopify Bestand wird nicht aktualisiert Shopify-Connector 0
Neu JTL Wawi Bild-Upload unvollständig oder nur als mit meinem PC hochgeladen zu sehen User helfen Usern - Fragen zu JTL-Wawi 2
Neu Bestimmte Artikel von JTL-Search ausschließen JTL-Search 0
JTL Multishop: Domain 1: Eine Sprache, eine Währung | Domain 2: 3 Sprachen, 3 Währungen JTL-Wawi 1.7 3
Neu Email Versand in JTL Wawi einstellen User helfen Usern - Fragen zu JTL-Wawi 3
Neu Produktfeld "Produktkategorie" von JTL nach Shopify? Shopify-Connector 0
Neu Greyhound JTL-Connector funktioniert nach Update auf 1.8.12 nicht mehr richtig Technische Fragen zu den JTL-Connectoren 5
Neu JTL erstellt falsche Rechnungskorrekturen für Amazon.co.uk Aufträge und verweigert den Support Amazon-Anbindung - Fehler und Bugs 5
Neu E-Commerce-Effizienz steigern: Welche Programmiersprache verbessert die JTL-Shop-Entwicklung? Technische Fragen zu Plugins und Templates 1
Neu JTL-Wawi Logdatei Speicherort JTL-Wawi - Fehler und Bugs 6
In Diskussion JTL POS Kundennummer wird nicht an JTL Wawi übertragen JTL-POS - Fehler und Bugs 2
Auftrag und Rechnung Ausgabe funktioniert nicht Client JTL 1.8.10.0 JTL-Wawi 1.8 9
Neu DPD-Versand in Nicht-EU-Länder mit JTL-Shipping JTL-ShippingLabels - Ideen, Lob und Kritik 1
Neu JTL-Ameise Kontaktdaten-Export und in Greyhound importieren plus Zuweisen User helfen Usern 1
Wichtig 👉 Wichtiger Hinweis: JTL-eazyAuction Server Downtime am Dienstag, 12.03.2024 News, Events und Umfragen 0
Neu JTL Shipping Labels mit DHL Unterschied Versenden, Versenden 3.0 und Intraship User helfen Usern - Fragen zu JTL-Wawi 8
Tablet Empfehlung für JTL-WaWi APP? JTL-Wawi App 0
Neu JTL überträgt Versandart Sendungsnummer nur teilweise an Amazon Amazon-Anbindung - Fehler und Bugs 3
Neu JTL-Installation- Verbindung zur Datenbank -SA Kennwort Installation von JTL-Wawi 22
Neu Alle Produktbilder in Shopify aus JTL löschen Shopify-Connector 0
Neu Kompatibilitätsliste JTL Shop & JTL Wawi Installation / Updates von JTL-Shop 2
Neu JTL-POS installation vom Playstore Einrichtung / Updates von JTL-POS 2
Neu JTL-POS installation vom Playstore Installation von JTL-Wawi 0
Neu JTL-Kenner Raum Aachen zur Mithilfe gesucht Dienstleistung, Jobs und Ähnliches 2
Neu JTL-Shop 5 Paypal Zahlung 30 Tage Zahlungsziel Allgemeine Fragen zu JTL-Shop 6
Neu JTL-Shop 5.3.0 RC3 Fehler nach Update Portlet Banner, fehlendes Produkt JTL-Shop - Fehler und Bugs 0
Neu Umstieg von Shopware 5 zu JTL Shop 5 - Ranking behalten Allgemeine Fragen zu JTL-Shop 2
Neu JTL Connector Woocomerce für PHP Version 7.4 WooCommerce-Connector 2
Neu Verbindungsproblem Wawi (1.8.12.0) zum JTL-Shop (5.2.4) über localhost User helfen Usern - Fragen zu JTL-Wawi 0
Neu JTL 1.5.55.8 Statistik - durschnittlicher Verkaufspreis - Mengen und Position User helfen Usern - Fragen zu JTL-Wawi 0
Neu JTL-Wawi mit Shopware/Magnalister User helfen Usern - Fragen zu JTL-Wawi 3

Ähnliche Themen