zoukankan html css js c++ java

go to Top 返回顶部例子

View Code

<!DOCTYPE html>
<html class="col_youhui">
<head>
<meta http-equiv="content-type" content="text/html; charset=GB2312">
<title>go to top</title>
<style type="text/css">
#goTopBtn{ position:fixed; right:0px; bottom:55px; 30px; height:33px; line-height:30px; cursor:pointer; text-align:center; font-size:12px;_position:absolute;_right:auto;_left:expression(eval(document.documentElement.scrollLeft+document.documentElement.clientWidth-this.offsetWidth)-(parseInt(this.currentStyle.marginLeft,10)||0)-(parseInt(this.currentStyle.marginRight,0)||0));_top:expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop,10)||0)-(parseInt(this.currentStyle.marginBottom,0)||0)));}
</style>
</head>

 <body>

    <div style="margin:100px auto; 960px;">
        
        <div style="float:left;312px; height:41px;">
            <img src="txt_3.png" />
        </div>
        <div style="float:left;500px;height:1850px; background:red;">
        
        <div id="goTopBtn" style="display:none;"><img src="top.jpg" border="0" /></div>
        <script type="text/javascript">
        goTopEx();
        function goTopEx(){
        var obj=document.getElementById("goTopBtn");
        function getScrollTop(){
                return document.documentElement.scrollTop;
            }
        function setScrollTop(value){
                document.documentElement.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);
                }
        }
    }
        </script>
        
        
        </div>
    
    
    </div>
    
    
    

 


</body>
</html>

外部可以调用这个

独立上传的图标

查看全文

相关阅读:
互联网对实体经济的三轮冲击
 虎嗅网
 RabbitMQ实战-死信队列
 RabbitMQ实战
 Hadoop之MapReduce流程
 Hadoop之HDFS读写流程
 GitHub预览网页[2019最新]
Java操作Hadoop集群
 Hadoop分布式集群搭建
 Hadoop Local（本地）模式搭建

原文地址：https://www.cnblogs.com/ishibin/p/2509546.html

go to Top 返回顶部 例子

go to Top 返回顶部例子