zoukankan      html  css  js  c++  java
  • 返回头部效果

    返回头部

        <style>
            body {
                 2000px;
            }
           .top{
               position: fixed;
               right:50px;
               bottom:100px;
               display: none;
           }
        </style>
    </head>
    <body>
    	<!--
    		获取页面滚走兼容 : document.body.scrollTop || document.documentElement.scrollTop
    	-->
    <div id="gotop" class="top">
        <img src="images/Top.jpg" alt=""/>
    </div>
     <p>天王盖地虎,宝塔镇河妖</p>
       <p>天王盖地虎,宝塔镇河妖</p>
       <p>天王盖地虎,宝塔镇河妖</p>
       <p>天王盖地虎,宝塔镇河妖</p>
       <p>天王盖地虎,宝塔镇河妖</p>
       <p>天王盖地虎,宝塔镇河妖</p>
       <p>天王盖地虎,宝塔镇河妖</p>
       <p>天王盖地虎,宝塔镇河妖</p>
       <p>天王盖地虎,宝塔镇河妖</p>
       <p>天王盖地虎,宝塔镇河妖</p>
       <p>天王盖地虎,宝塔镇河妖</p>
       <p>天王盖地虎,宝塔镇河妖</p>
       <p>天王盖地虎,宝塔镇河妖</p>
       <p>天王盖地虎,宝塔镇河妖</p>
       <p>天王盖地虎,宝塔镇河妖</p>
       <p>天王盖地虎,宝塔镇河妖</p>
       <p>天王盖地虎,宝塔镇河妖</p>
    </body>
    </html>
    <script type="text/javascript">
    	/*
    	 1、触发滚动条,小火箭显示
    	 2、点击小火箭   滚动条回到顶部  小火箭消失
    	*/
    	var gotop = document.getElementById("gotop");
    	window.onscroll = function(){//触发滚动条,小火箭显示
    		var Stop = document.body.scrollTop || document.documentElement.scrollTop;
    		if(Stop > 0){
    			gotop.style.display = "block";
    		}
    	}
    	gotop.onclick = function(){//点击小火箭   滚动条回到顶部  小火箭消失
    		document.body.scrollTop = document.documentElement.scrollTop = 0;
    		gotop.style.display = "none";
    	}
    </script>
    

      

  • 相关阅读:
    cf415D Mashmokh and ACM(DP)
    [USACO]EulerianTour (欧拉通路)
    hdu2544 (SPFA)
    hdu2544 (bellman-ford)
    [TC]SRM615 div1 250 AmebaDiv1
    Step By Step (zz from UESTC)
    [USACO]Sweet Butter 多种解法
    Node.js权威指南 (3)
    Web开发常见问题荟萃
    比较vue.js react.js angular.js
  • 原文地址:https://www.cnblogs.com/xiaoyaolang/p/11911573.html
Copyright © 2011-2022 走看看