新闻中心

Ecshop商城右侧底部添加一键回顶部按钮

作者 / 无忧主机时间 2014-09-04 12:32:17

经常网上购物的站长朋友们都清楚的知道，一个大型商城的首页都会放很多促销商品，当阅览的时候用鼠标从上一点点的往下阅览，可是由于太多了看到了商城的最下方位的时候再想回到首页的顶端还需要用鼠标拖上来，那么有没有什么好的方法一键就可以回到顶端呢？无忧主机小编今天也是刚好遇到了一位站长朋友使用Ecshop搭建的大型商城销售系统，他也是在网站首页放了很多商品，但是当客户挑选到最下方的时候还要用鼠标拖回到顶端实在是不方便，为了增加客户体验度。他向小编求助，找个一键回到顶端的方法。无忧主机小编想到很多页面比较长的网站，都会有一个“一键到顶”或者“一键到底”的功能。通过查看源代码和一些朋友的帮助，下面无忧主机小编把整理出来的解决方案来为大家分享下吧。第一步：我们找一张小图片，也就是一键回到顶端的图标。小编在这里找一个图标280*214像素的。命名为：top.jpg如下图：第二步：将做好的图片放在themes/模板文件夹/images 下即可。第三步：修改 themes/模板文件夹/library/page_footer.lbi 文件在page_footer.lbi底部加

<style>
.to_top{width:20px;height:59px;right:40px;position:fixed;bottom:50px;_position:absolute;_top:expression(ev al(document.documentElement.scrollTop+document.documentElement.clientHeight-134))}
</style>
<a href="#" class="to_top" title="返回顶部"><img src="images/top.jpg" width="20" height="59" /></a>

修改后登陆下网站的后台找到右上角的更新缓存，然后再回到首页就可以看到右下角有个小图标了如下图：