zoukankan      html  css  js  c++  java
  • ECSHOP 返回顶部代码

    第一种样式:

    打开模板,底部模板文件 library/page_footer.lbi

    在最后加入以下代码:<div class="scroll_div"><a href="#top" title="返回顶部"><img src="images/scroll.png" width="21" height="65" alt="返回顶部" /></a></div>

    再在模板CSS文件里加入CSS,并把下面的图片,另存为:scroll.png

    /*----- 返回顶部 ------*/
    .scroll_div {
        background:url(images/scroll.png) no-repeat top center;
        bottom:10px;
        position:fixed;
        right:11%;
        z-index:1;
        _position:absolute;
        _bottom:auto;
        _top:expression( eval(document.compatMode && document.compatMode=='CSS1Compat') ? documentElement.scrollTop +(documentElement.clientHeight - this.clientHeight) - 1:document.body.scrollTop + (document.body.clientHeight - this.clientHeight) - 1);
        height:65px;
        width:21px;
        display:none;
        color:#FFFFFF;
        float:right;
        display: block; 
        cursor:pointer;
    }
    * html .scroll_div {
        background:none;
        filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true,sizingMethod=corp,src='images/scroll.png');
        bottom:110px;
    }

    第二种样式:

    打开模板,底部模板文件 library/page_footer.lbi

    在最后加入以下代码:

    <div id="scroll"><a href="#" title="返回顶部" class="back-to-top"></a></div>

    再在模板CSS文件里加入CSS,并把下面的图片,另存为:back-top.png

    #scroll {
        clear:both;
        position:fixed;
        bottom:22px;
        right:20px;
        _position:absolute;
        _right:-35px;
        width:32px;
        height:37px;
        z-index:99;
        _top:expression(eval(document.compatMode&&document.compatMode=='CSS1Compat') 
    ?documentElement.scrollTop+(documentElement.clientHeight-this.clientHeight)-22:document.body.scrollTop+(document.body.clientHeight-this.clientHeight)-0);
        z-index:1;
    }
    #scroll a {
        float:left;
        background:url(images/back-top.png) no-repeat;
        display:inline;
        width:48px;
        height:48px;
    }
    #scroll a.back-to-top {
        background-position:left top;
    }
    #scroll a.back-to-top:hover {
        background-position:right top;
    }

    ------------------------------------------华丽丽的分割线--------------------- ------------------------------------

    源厂制造10-10000级洁净无尘车间防静电防尘用品!网址:http://www.lgfjd.com 微信号:614412
  • 相关阅读:
    实例模拟struts核心流程
    不同语言下的日期格式化大全
    Android基础之响应Menu键弹出菜单Demo
    c++复习基础要点02 虚函数与模板 与static inline是否共存
    Android listView scroll 恢复滚动位置
    centos本地源搭建——iso
    easy_install和pip区别
    在前台运行Service
    mybatis处理集合、循环、数组和in查询等语句的使用
    java并发库 Lock 公平锁和非公平锁
  • 原文地址:https://www.cnblogs.com/wangblognet/p/2881031.html
Copyright © 2011-2022 走看看