在百度或者ECSHOP论坛里，看了很多“返回顶部”或者“回到顶部”的代码，很多都动用了JS代码，导致很多新手朋友实践起来有些难度。
; e2 M, k3 q* \
, f! F+ [& f! g" { g8 j5 b- @( Q& E下面本站为您提供的这个“ECSHOP返回顶部的代码”，是用纯CSS实现的，实现起来超级简单。
# j$ ~: x$ P W: q i
9 V$ ?& M; W3 m. a效果图如下：
1 W9 \, `) Z4 p. @# v8 }0 F/ E" F7 ^7 @+ p$ y
3 b- `) }9 } L8 m% u- M
, F" i: x: w/ _4 W& X( ^/ ]2 Y' E: r1 `4 d
a% }; B2 w* M2 X" g
看到了吧，这个“回顶部”的小按钮永远漂浮在窗口的右下角。
6 D9 A' x- _# V# V/ P; o6 U0 J, H4 z$ |8 u9 r
实现方法：
7 d8 l$ ~$ }" Y/ a# v4 {: J2 U% ~4 q; [: |9 L1 ^% `! {
" F6 r# c3 A3 P' D/ |% k B
修改 themes/模板文件夹/library/page_footer.lbi 文件
6 A- g% U( S7 t, J! a7 P3 k3 w& h- B* T- Q. Z) Z
在最末尾加入以下代码即可
( z5 m6 L. w* B4 N- `. Y. h9 j0 T- <style>+ {! ]" q9 E& U) {* x( F2 R: T, D
- .to_top{width:20px;height:59px;right:40px;position:fixed;bottom:50px;_position:absolute;_top:expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight-134))}& d+ B6 J2 x% N" B/ b, k' L U9 |
- </style>+ Z+ k. L$ D+ {4 q
- <a href="#" class="to_top" title="返回顶部"><img src="http://www.ecshop120.com/images/gotop.gif" width="20" height="59" /></a>
|
28143
0
©2015-2022 www.tuyuanma.com 版权所有 Sitemap.xml
提升卡
置顶卡
沉默卡
变色卡
千斤顶
赣公网安备36112102000036号
赣ICP备17001544号-10