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>
    

      

  • 相关阅读:
    1051 Wooden Sticks(贪心-3)
    97 等价交换(贪心-2)
    python文件操作
    python学习-day 2
    python学习-day 1
    Python 测试题目-1
    Python list和dict方法
    Python 字符串
    while循环语句
    Python if判断语句
  • 原文地址:https://www.cnblogs.com/xiaoyaolang/p/11911573.html
Copyright © 2011-2022 走看看