新聞中心

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

作者 / 無憂主機時間 2014-09-04 12:32:17

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