网店“回顶部”图标终于搞定啦

2016-07-07 16:04 来源：www.chinab4c.com 作者：ecshop专家

renyidian_top.png 发图片大家来看，为这么一点小改动，花了我二天时间，现在终于搞定，在网上找了几个代码都不理想。
最后把一同学的网站源码复制来，才搞定。

有需要的在可以联系QQ：250604465
演示网站：http://www.renyidian.com/#top

现在把代码贴给大家。
在page_footer.lbi里面最下面加上
  1. <div class="scroll_div" style="left: 1050px; display: block; "><a href="#top"><img src="http://www.renyidian.com/themes/renyidian/imgs/global/scroll.png"></a></div>
复制代码


在page_header.css里面最下面加上
  1. .scroll_div {background:url(../imgs/global/scroll.png) no-repeat top center;bottom:200px; position: fixed; left:1000px; z-index:1;_position: absolute; _bottom: auto; _top: expression( eval(document.compatMode && document.compatMode=='CSS1Compat') ? documentElement.scrollTop +

  3. (documentElement.clientHeight - this.clientHeight) - 1 : document.body.scrollTop + (document.body.clientHeight - this.clientHeight) - 1); height:65px; width:21px; display:none; color:#FFFFFF; cursor:pointer;}

  5. * html .scroll_div {background:none;
  6. filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=corp, src='../imgs/global/scroll.png');bottom:200px;
  7. }
复制代码


这样保存上传文件就OK啦。
scroll.png

回答：
page_header.css 在那里啊，找不到啊！！！

我也没找到这个文件啊.

在library文件夹里面..

我找了N次,没有page_header.css这个文件,只有page_header.lbi 而且改了这个lbi文件,网站顶部出来一堆代码, 不知道是文件错了,还是漏什么标识. LZ写得不具体啊.

怎样让其始终保持在网站右侧呢？
这个貌似改变分辨率就错位，淘宝的可以自动跳出适应,适中保持网站页面右侧
这个是这个代码 QQ截图未命名.gif 这个是淘宝 002.gif

确实很好，已经用上了。

尤其好的是，图标固定在一个地方，而不是象浮动窗那样一跳一跳的。

怎样让其始终保持在网站右侧呢？
这个貌似改变分辨率就错位，淘宝的可以自动跳出适应,适中保持网站页面右侧 ...
swyh 发表于 2011-3-18 20:36



把left: 1050px;改为right:5px就行了

我找了N次,没有page_header.css这个文件,只有page_header.lbi 而且改了这个lbi文件,网站顶部出来一堆代码,...
szgood 发表于 2011-3-18 17:18



只要是CSS文件都可以





3Q

看了下，很不错的

终于成功了, 另外有两点建议如下,看看哪个人能帮忙解决:
1. 建议可以自动适应屏幕大小,固定在右侧(与右侧滚动条保持距离一直不变);
2. 建议可以实现自适应第二屏显示返回顶部按钮效果,如果已经是顶部就不出来;

因为目前那个"回顶部"的图标在不同大小的显示器下, 位置总出现错位, 比如小屏幕显示在右侧, 换成大屏幕则右边偏向于中间的位置, 挡住了商品图片; 而且, 不管是不是顶部都出来, 这个看看能不能优化一下.

考虑到以上情况,我后来又把它取消了.