3
В head.tpl.html вставляем :
<![if !lte IE 8.0]>
{literal}
<script type="text/javascript">
(function() {
function $(id){
return document.getElementById(id);
}
function goTop(acceleration, time) {
acceleration = acceleration || 0.1;
time = time || 12;
var dx = 0;
var dy = 0;
var bx = 0;
var by = 0;
var wx = 0;
var wy = 0;
if (document.documentElement) {
dx = document.documentElement.scrollLeft || 0;
dy = document.documentElement.scrollTop || 0;
}
if (document.body) {
bx = document.body.scrollLeft || 0;
by = document.body.scrollTop || 0;
}
var wx = window.scrollX || 0;
var wy = window.scrollY || 0;
var x = Math.max(wx, Math.max(bx, dx));
var y = Math.max(wy, Math.max(by, dy));
var speed = 1 + acceleration;
window.scrollTo(Math.floor(x / speed), Math.floor(y / speed));
if(x > 0 || y > 0) {
var invokeFunction = "top.goTop(" + acceleration + ", " + time + ")"
window.setTimeout(invokeFunction, time);
}
return false;
}
//*
function scrollTop(){
var el = $('gotop');
var stop = (document.body.scrollTop || document.documentElement.scrollTop);
if(stop>400){
if(el.style.display!='block'){
el.style.display='block';
smoothopaque(el, 0, 100, 1);
}
}
else
el.style.display='none';
return false;
}
// Плавная смена прозрачности
function smoothopaque(el, startop, endop, inc){
op = startop;
// Устанавливаем прозрачность
setopacity(el, op);
// Начинаем изменение прозрачности
setTimeout(slowopacity, 1);
function slowopacity(){
if(startop < endop){
op = op + inc;
if(op < endop){
setTimeout(slowopacity, 1);
}
}else{
op = op - inc;
if(op > endop){
setTimeout(slowopacity, 1);
}
}
setopacity(el, op);
};
};
// установка opacity
function setopacity(el, opacity){
el.style.opacity = (opacity/100);
el.style.filter = 'alpha(opacity=' + opacity + ')';
};
if (window.addEventListener){
window.addEventListener("scroll", scrollTop, false);
window.addEventListener("load", scrollTop, false);
}
else if (window.attachEvent){
window.attachEvent("onscroll", scrollTop);
window.attachEvent("onload", scrollTop);
}
window['top'] = {};
window['top']['goTop'] = goTop;
})();
</script>
{/literal}
<![endif]>
В style.css :
.scrollTop{
background:url(ссылка на картинку) 0 0 no-repeat;
display:block; width:50px; height:50px;
position:fixed; bottom:10px; left:47%;
z-index:2000;
}
.scrollTop:hover{ background-position:0 -58px; }
"Ссылка на картинку" - ссылка на свою картинку, которая будет появлятся при скроллинге (например какая нибудь симпатичная стрелочка). Один из вариантов картинки прилагаю. Ширина и высота в стилях указана исходя из размера именно этой картинки.
В index.tpl.html где нибудь в подвале вставляем :
<![if !lte IE 8.0]> <a id="gotop" class="scrollTop" href="#" onclick="top.goTop(); return false;"></a> <![endif]>
Коды
<![if !lte IE 8.0]>и
<![endif]>нужны, так как в этом замечательном продукте Microsoft (IE 8 и ниже) все это дело работает не совсем так, как нужно
Прикрепленные файлы
-
arr.png 4.04К
41 Количество загрузок:
