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

    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

  • 相关阅读:
    nginx一键安装脚本
    nginx动静分离之后,设置默认主页
    日志备份
    cc高防主机部署
    原型和原型链
    Git&Github分支
    Git&Github基础
    传输层协议TCP&UDP
    本地库与远程库交互
    SVG
  • 原文地址:https://www.cnblogs.com/james1207/p/3315279.html
Copyright © 2011-2022 走看看