Back to TOP - im JTL-Shop 3.18 einbinden

[deepblue]

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! 🙂

 

[casim]

AW: Back to TOP - im JTL-Shop 3.18 einbinden

ein bischen html...ein bischen css ein wenig mehr jquery und du hast deinen Top-Button

jQuery topLink Plugin

 

[deepblue]

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]

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]

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?

 

[ram1]

AW: Back to TOP - im JTL-Shop 3.18 einbinden

Das regelst Du via Javacsript, ist z.B. hier oder hier ganz gut erklärt.

 

[deepblue]

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]

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]

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

 

[casim]

AW: Back to TOP - im JTL-Shop 3.18 einbinden

Huhu wesselow

ohne deinen code zu kennen, kann ich dir nicht groß weiter helfen.

Aber bevor du dich in tpl-Anpassungen begibst ... kennst du das?

http://forum.jtl-software.de/plugins-fuer-jtl-shop3/64930-neues-plugin-scroll-nach-oben-button.html

 

[r.wehser]

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

 

[don_philipe]

Hier ist ein back to the top button, der bei uns im JTL 4 Shop sauber funktioniert. Man muss nur den Script Code in {literal} {/literal} packen. Viel Spass damit: http://jsfiddle.net/gilbitron/Lt2wH/