ECSHOP 返回顶部代码
时间:2024年01月31日
/来源:网络
/编辑:佚名
第一种样式:
打开模板,底部模板文件 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;
}
复制代码
scroll.png图片
第二种样式:
打开模板,底部模板文件 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;
}
复制代码
back-top.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;
}
复制代码
scroll.png图片
第二种样式:
打开模板,底部模板文件 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;
}
复制代码
back-top.png图片
新闻资讯 更多
热门文章
- 178Moban源码谈谈免费源码与收费源码的区别
- 2帝国CMS忘记后台登陆用户名、密码、认证码的解决方法
- 3帝国CMS(EmpireCMS) v7.5后台任意代码执行漏洞及具体修复方法
- 4帝国CMS和WordPress 哪个好?哪个适合建站?
- 5如何解决Discuz的密码错误次数过多请15分钟后登陆的问题
- 6帝国cms灵动标签取得内容和栏目链接地址
- 7emlog pro 注册码“开心”教程(如果有一天,emlog官方版 或者 emlog免费版 跑路了,那用户怎么办?)
- 8织梦CMS在nginx下设置伪静态方法(附nginx伪静态规则)
- 9帝国cms后台登录出现”您还未登录”怎么解决?
- 10帝国cms7.5忘记登录密码 和忘记登录认证码以及多次登录 失败被锁定解决办法