您的位置:首页 > 编程语言

ECSHOP 返回顶部代码

2013-01-29 10:48 127 查看
第一种样式:

打开模板,底部模板文件 library/page_footer.lbi

在最后加入以下代码:<div class="scroll_div"><a href="#top" title="返回顶部"><img src="images/scroll.png" width="21" height="65" alt="返回顶部" /></a></div>

再在模板CSS文件里加入CSS,并把下面的图片,另存为:scroll.png

/*----- 返回顶部 ------*/
.scroll_div {
background:url(images/scroll.png) no-repeat top center;
bottom:10px;
position:fixed;
right:11%;
z-index:1;
_position:absolute;
_bottom:auto;
_top:expression( eval(document.compatMode && document.compatMode=='CSS1Compat') ? documentElement.scrollTop +(documentElement.clientHeight - this.clientHeight) - 1:document.body.scrollTop + (document.body.clientHeight - this.clientHeight) - 1);
height:65px;
width:21px;
display:none;
color:#FFFFFF;
float:right;
display: block;
cursor:pointer;
}
* html .scroll_div {
background:none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true,sizingMethod=corp,src='images/scroll.png');
bottom:110px;
}




第二种样式:

打开模板,底部模板文件 library/page_footer.lbi

在最后加入以下代码:

<div id="scroll"><a href="#" title="返回顶部" class="back-to-top"></a></div>

再在模板CSS文件里加入CSS,并把下面的图片,另存为:back-top.png

#scroll {
clear:both;
position:fixed;
bottom:22px;
right:20px;
_position:absolute;
_right:-35px;
width:32px;
height:37px;
z-index:99;
_top:expression(eval(document.compatMode&&document.compatMode=='CSS1Compat')
?documentElement.scrollTop+(documentElement.clientHeight-this.clientHeight)-22:document.body.scrollTop+(document.body.clientHeight-this.clientHeight)-0);
z-index:1;
}
#scroll a {
float:left;
background:url(images/back-top.png) no-repeat;
display:inline;
width:48px;
height:48px;
}
#scroll a.back-to-top {
background-position:left top;
}
#scroll a.back-to-top:hover {
background-position:right top;
}


内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: