您现在的位置是：首页 > cms教程 > ecshop商城教程ecshop商城教程

ecshop返回顶部按钮代码样式写法实例

颜东鑫2025-02-06 17:16:52ecshop商城教程已有6人查阅

导读打开模板，底部模板文件 library/page_footer.lbi在之后加入以下代码：再在模板CSS文件里加入CSS，并把下面的图片，另存为：scroll.png

第一种样式：
打开模板，底部模板文件 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;
}