Posts: 1334 Location: [Censor]
Wed 09 Jan, 2013 13:47
Demo
YouTube Link
Files to edit : 3
OPEN your overall_header.tpl
FIND
BEFORE ADD
<script>
$(document).ready(function(){
// hide #back-top first
$("#back-top").hide();
// fade in #back-top
$(function () {
$(window).scroll(function () {
if ($(this).scrollTop() > 100) {
$('#back-top').fadeIn();
} else {
$('#back-top').fadeOut();
}
});
// scroll body to 0px on click
$('#back-top a').click(function () {
$('body,html').animate({
scrollTop: 0
}, 800);
return false;
});
});
});
</script>
OPEN your overall_footer.tpl
FIND
BEFORE ADD
<div id="back-top">
<a href="#top"><span></span>{L_BACK_TOP}</a>
</div>
OPEN
style_xxx.css example style_cyan.css
FIND around line 6
@import url("style_xxx_colors.css");
AFTER ADD
@import url("back_top.css");
Upload
back_top.css - to your template dir (in this case on demo templates/icy_phoenix)
up_arrow.png - to your template images dir (in this case on demo templates/icy_phoenix/images)
if you want all css changes you can do it in back_top.css
Thats all :wink:
