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>
    

      

  • 相关阅读:
    类的空间问题
    面向对象初识
    collections模块,shelve模块
    一段水印文字的练习
    jquery选择器中(:button)的含义
    关于通过jquery来理解position的relative及absolute
    [小明学算法]1.动态规划--最长递增子序列问题
    [小明学算法]2.贪心算法----
    [Unity的序列化]2.技能编辑器的实现
    [Unity的序列化]1.什么是序列化
  • 原文地址:https://www.cnblogs.com/xiaoyaolang/p/11911573.html
Copyright © 2011-2022 走看看