新聞中心

Ecshop商城右側(cè)底部添加一鍵回頂部按鈕

作者 / 無(wú)憂主機(jī) 時(shí)間 2014-09-04 12:32:17

經(jīng)常網(wǎng)上購(gòu)物的站長(zhǎng)朋友們都清楚的知道，一個(gè)大型商城的首頁(yè)都會(huì)放很多促銷商品，當(dāng)閱覽的時(shí)候用鼠標(biāo)從上一點(diǎn)點(diǎn)的往下閱覽，可是由于太多了看到了商城的最下方位的時(shí)候再想回到首頁(yè)的頂端還需要用鼠標(biāo)拖上來(lái)，那么有沒(méi)有什么好的方法一鍵就可以回到頂端呢？無(wú)憂主機(jī)小編今天也是剛好遇到了一位站長(zhǎng)朋友使用Ecshop搭建的大型商城銷售系統(tǒng)，他也是在網(wǎng)站首頁(yè)放了很多商品，但是當(dāng)客戶挑選到最下方的時(shí)候還要用鼠標(biāo)拖回到頂端實(shí)在是不方便，為了增加客戶體驗(yàn)度。他向小編求助，找個(gè)一鍵回到頂端的方法。無(wú)憂主機(jī)小編想到很多頁(yè)面比較長(zhǎng)的網(wǎng)站，都會(huì)有一個(gè)“一鍵到頂”或者“一鍵到底”的功能。通過(guò)查看源代碼和一些朋友的幫助，下面無(wú)憂主機(jī)小編把整理出來(lái)的解決方案來(lái)為大家分享下吧。第一步：我們找一張小圖片，也就是一鍵回到頂端的圖標(biāo)。小編在這里找一個(gè)圖標(biāo)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>

修改后登陸下網(wǎng)站的后臺(tái)找到右上角的更新緩存，然后再回到首頁(yè)就可以看到右下角有個(gè)小圖標(biāo)了如下圖：