zoukankan      html  css  js  c++  java
  • javascript返回顶端源代码

    <div style="display:none" id="goTopBtn"><img src="http://www.unitymanual.com/m/Manual/img/top.png" width="54" height="54" border="0"></div>

    <script type="text/javascript">
    function goTopEx(){
            var obj=document.getElementById("goTopBtn");
            function getScrollTop(){
                    return document.documentElement.scrollTop || document.body.scrollTop
                }
            function setScrollTop(value){
    				document.documentElement.scrollTop = value;
       				document.body.scrollTop = value;
                }    
            window.onscroll=function(){getScrollTop()>0?obj.style.display="":obj.style.display="none";}
            obj.onclick=function(){
                var goTop=setInterval(scrollMove,10);
                function scrollMove(){
                        setScrollTop(getScrollTop()/1.1);
                        if(getScrollTop()<1)clearInterval(goTop);
                    }
            }
        }
    goTopEx();




    实现2:

    #scrolltop{
        visibility:hidden;
        position:fixed;
        bottom:100px;
        display:block;
        margin:-30px 0 0 2px;
        40px;
        background:#f4f4f4;
        border:1px #cdcdcd solid;
        border-radius:3px;
        border-top:0;
        cursor:pointer;
    }

    #scrolltop:hover{
        text-decoration:none;
    }

    .ie6 #scrolltop{
        position:absolute;
        bottom:auto;
    }

    #scrolltop a{
        display:block;
        30px;
        height:24px;
        padding:3px 5px;
        line-height:12px;
        text-align:center;
        color:#787878;
        text-decoration:none;
        background:url(http://www.unitymanual.com/static/image/common/scrolltop.png) no-repeat 0 0;
        border-top:1px #cdcdcd solid;
    }

    a.scrolltopa:hover{
        background-position:-40px 0px !important;
    }

    a.replyfast{
        background-position:0 -30px !important;
    }

    a.replyfast:hover{
        background-position:-40px -30px !important;
    }

    a.returnlist,a.returnboard{
        background-position:0 -60px !important;
    }

    a.returnlist:hover,a.returnboard:hover{
        background-position:-40px -60px !important;
    }

    #scrolltop a b{
        visibility:hidden;
        font-weight:normal;
    }

    <div style="left: auto; right: 0px; visibility: visible;" id="scrolltop">
       
      <span hidefocus="true"><a title="返回顶部" onclick="window.scrollTo('0','0')" class="scrolltopa"><b>返回顶部</b></a></span>
       
    </div>
  • 相关阅读:
    【HDU 1060】Leftmost Digit
    【HLG 1572】表达式计算(后缀表达式+栈的应用)
    Vue CLI3 开启gzip压缩
    html元素呼吸效果
    前端实现在线预览pdf、word、xls、ppt等文件
    devServer proxy的使用
    7个基础js函数
    前端初中高级面试题1
    模仿头条导航的左右滚动效果
    angular基本入门教程
  • 原文地址:https://www.cnblogs.com/claireyuancy/p/7116739.html
Copyright © 2011-2022 走看看