• 返回顶部的代码


    top.html

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>返回顶部</title>
    <link rel="stylesheet" type="text/css" href="core.css" />
    </head>
    <body>
    <br>


    <div style="height:2000px;">内容区</div>

    <div class="go-top" id="goTop">
    <a href="javascript:;" target="_self" monkey="gotop"></a>
    </div>

    <div id="hide" style="display:none;"></div>
    <script type="text/javascript" src="core.js"></script>

    </body>
    </html>

    core.css

    .go-top{ visibility:hidden;  position:fixed; _position:absolute; bottom:160px; left:50%; 27px; height:73px; background:url(gotop.gif) no-repeat 0 0;margin-left:500px; margin-bottom:0; text-align:center; font-size:12px; line-height:13px; cursor:pointer; color:#999999;}
    .go-top i{ position:relative; _left:2px; display:block; 12px; margin:0 auto; line-height:16px; height:14px; overflow:hidden;writing-mode:tb-rl;transform: rotate(90deg);-webkit-transform: rotate(90deg);-moz-transform: rotate(90deg);-o-transform: rotate(90deg); font-family:"宋体"; font-weight:700;}
    .go-top a{ text-decoration:none; color:#999999; outline:none;}
    .go-top:hover{background-position:-29px 0;}

    core.js

    (function(){var G=function(H){return document.getElementById(H)};var F=function(K,J){for(var I=0,H=K.length;I<H;I++){J.apply(K[I],[I,K[I]])}};var D=function(K,J,I,H){F(I,function(L,M){if(L!=H){M.className=J}});I[H].className=K};var C=function(J){var H=[];for(var I=0;I<20;I++){if(G(J+"-"+I)){H.push(G(J+"-"+I))}else{return H}}return H};var A=function(H,J){var K=C(J.tabctrl+H);var I=C(J.tab+H);if(H==1){F(K,function(L,M){M.onclick=function(){D("","hide",I,L);D("on","",K,L);return false;}})}else{F(K,function(L,M){M.onclick=function(){D("","hide",I,L);D("on","",K,L)}})}};var B={tabctrl:"tbc",tab:"tb",num:6};for(var E=0;E<B.num;E++){A(E,B)}})();

    var ele=document.getElementById("goTop");
    var hide = document.getElementById('hide');
    function goTop(){   
        if(ele){
      ele.onclick = function(){
        var doc = (document.documentElement.scrollTop) ? document.documentElement : document.body;
           var time;
           time = setInterval(function(){         
              doc.scrollTop -= Math.ceil(doc.scrollTop * 0.7);
        if(doc.scrollTop <= 0)  clearInterval(time);
           }, 1);
            }
        }
    }
    goTop();
    window.onscroll = function(){
             if(ele && hide){
         var doc = (document.documentElement.scrollTop) ? document.documentElement : document.body;
         ele.style.visibility = doc.scrollTop ? 'visible' : 'hidden';
                  hide.innerHTML = ''; 
       }   
    }

     gotop.gif

  • 相关阅读:
    获取父子栏目内容的知识点总结:更多信息页面的信息内容获取
    获取栏目内容的知识点总结:SingleInfoSortPortlet类型笔记(单栏目的获取)
    JBPM插件安装(MyEclipse8.5测试成功)和配置
    获取栏目内容的知识点总结:KnobInfoSortPortlet类型笔记(没有层级关系的栏目信息)
    HTML的事件说明
    正交投影、格拉姆施密特正交(一)
    子级Repeater获取父级Repeater绑定项的值
    启用IIS6的Gzip压缩功能
    属性IsLocked不可用于登录"[sa]解决办法
    在IE流览器中正确显示PNG透明图片
  • 原文地址:https://www.cnblogs.com/james1207/p/3315279.html
Copyright © 2020-2023  润新知