ECSHOP返回顶部的代码 纯CSS超简单-站长杂谈下载

ECSHOP返回顶部的代码 纯CSS超简单

来自版块: 站长杂谈发表于: 2015-8-8 23:27:02
28847
0
如本资源下载地址失效,请点击此处进行反馈
开通本站Svip会员,全站资源免费下
在百度或者ECSHOP论坛里,看了很多“返回顶部”或者“回到顶部”的代码,很多都动用了JS代码,导致很多新手朋友实践起来有些难度。) W) S5 N$ p8 e8 Q3 D8 A2 j

, B/ X2 F" ~1 _" O4 C2 H下面本站为您提供的这个“ECSHOP返回顶部的代码”,是用纯CSS实现的,实现起来超级简单。* u1 Y, X2 `% Y/ N. @

' `2 r( G  P, C效果图如下:# M) b/ |% I0 |+ g( i' A! r

2 c8 ~  [. O% D  {; [2 z# _. y 111217112755174717djb223.jpg ; P& A4 L# ]* `6 x9 N. |# k
0 X. L) L  M/ \. x4 _3 j6 v" ]

& N3 {4 X0 W' ?9 F/ u# C- N( ]9 ~  K, z4 c4 |
看到了吧,这个“回顶部”的小按钮永远漂浮在窗口的右下角。4 y" ]: ?+ |3 L3 Z  X, c' ]* d. {6 o

3 X2 C# N" q  f4 ^. {实现方法:
4 O6 @3 u3 G% `* x3 n) Z8 h% ~8 G2 g0 s4 I+ q( d
% V* h+ I2 x7 V: o
修改  themes/模板文件夹/library/page_footer.lbi 文件. b/ C" s; n1 ~0 ^

* l  D5 s* P3 A9 K% g: I) C在最末尾加入以下代码即可
  ~( z$ U; l- Z  |/ U
  1. <style>
    9 P1 N2 f1 ?5 a+ ^+ J. ~% A' M5 x
  2. .to_top{width:20px;height:59px;right:40px;position:fixed;bottom:50px;_position:absolute;_top:expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight-134))}& \1 D, u, V+ u0 l
  3. </style>" F9 M% _! ?% o) v  Q( s
  4. <a href="#" class="to_top" title="返回顶部"><img src="http://www.ecshop120.com/images/gotop.gif" width="20" height="59" /></a>
复制代码
经测试  完美兼容各大浏览器。5 a! ^4 d" J3 K1 f1 X' W% E# t

全部评论 0

您需要登录后才可以回帖 立即登录
登录
0
0
0
返回顶部