zoukankan      html  css  js  c++  java
  • 返回顶部 js

    返回顶部:

    1.可以在网页添加锚链接

    2.利用js 可以实现动画效果

    <!DOCTYPE HTML>
    <html>
    <head>
    	<meta charset="gb2312">
    	<title>goTop</title>
    	<style type="text/css">
    	* {margin:0;padding:0;}
    	#goTop {position:fixed;right:20px;bottom:40px;40px;height:32px;padding:8px 0 0;background-color:#666;border-radius:6px;cursor:pointer;}
    	#goTop:hover {background-color:#333;}
    	#goTop:hover .gotop1 {border-left:12px solid #333;border-right:12px solid #333;}
    	#goTop .gotop1 {0;margin:0 auto;border-bottom:12px solid #FFF;border-left:12px solid #666;border-right:12px solid #666;}
    	#goTop .gotop2 {10px;height:10px;margin:0 auto;background-color:#FFF;}
    	</style>
    <!--[if IE 6]>
    <style>
    /*解决IE6下position:fixed;问题*/
    #goTop{
    _position:absolute;
    _bottom:auto;
    _top:expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop,0)||0)-(parseInt(this.currentStyle.marginBottom,0)||10)));/*使元素固定在浏览器的底部*/
    }
    </style>
    <![endif]-->
    </head>
    <body>
    	<div title="返回顶部" id="goTop" style="display:none;">
    		<div class="gotop1"></div>
    		<div class="gotop2"></div>
    	</div>
    	<div>
    		<p>test</p>
    		<p>test</p>
    		<p>test</p>
    		<p>test</p>
    		<p>test</p>
    		<p>test</p>
    		<p>test</p>
    		<p>test</p>
    		<p>test</p>
    		<p>test</p>
    		<p>test</p>
    		<p>test</p>
    		<p>test</p>
    		<p>test</p>
    		<p>test</p>
    		<p>test</p>
    		<p>test</p>
    		<p>test</p>
    		<p>test</p>
    		<p>test</p>
    		<p>test</p>
    		<p>test</p>
    		<p>test</p>
    		<p>test</p>
    		<p>test</p>
    		<p>test</p>
    		<p>test</p>
    		<p>test</p>
    		<p>test</p>
    		<p>test</p>
    		<p>test</p>
    		<p>test</p>
    		<p>test</p>
    		<p>test</p>
    		<p>test</p>
    		<p>test</p>
    		<p>test</p>
    		<p>test</p>
    		<p>test</p>
    		<p>test</p>
    		<p>test</p>
    		<p>test</p>
    		<p>test</p>
    		<p>test</p>
    		<p>test</p>
    		<p>test</p>
    		<p>test</p>
    		<p>test</p>
    		<p>test</p>
    		<p>test</p>
    		<p>test</p>
    		<p>test</p>
    		<p>test</p>
    		<p>test</p>
    		<p>test</p>
    		<p>test</p>
    		<p>test</p>
    		<p>test</p>
    		<p>test</p>
    		<p>test</p>
    		<p>test</p>
    		<p>test</p>
    		<p>test</p>
    		<p>test</p>
    		<p>test</p>
    		<p>test</p>
    		<p>test</p>
    		<p>test</p>
    	</div>
    	<script type="text/javascript">
    	    function $getId(Id) {
    	        return document.getElementById(Id);
    	    }	    
    	    var goTop = $getId("goTop");
    
    	    window.onscroll = function () {
    	        if (document.documentElement.scrollTop + document.body.scrollTop > 0) {
    	            goTop.style.display = "";
    	        } else {
    	            goTop.style.display = "none";
    	        }
    	    }
    	    goTop.onclick = function () {
    	        var Timer = setInterval(GoTop, 10);
    	        function GoTop() {
    	            if (document.documentElement.scrollTop + document.body.scrollTop < 1) {
    	                clearInterval(Timer);
    	            } else {
    	                document.documentElement.scrollTop /= 1.1;
    	                document.body.scrollTop /= 1.1;
    	            }
    	        }
    	    }	
    	</script>
    </body>
    </html>
    

    关于onscroll:

    scroll事件是在window对象上发生,但表示的是页面相应元素的变化,
    在混杂模式下:可以通过<body>元素的scrollLeft/scrollTop监控这一变化,
    在标准模式下大多浏览器通过<html>元素反应这一变化(safari仍基于body)

    参考:蓝色理想:http://bbs.blueidea.com/thread-2979799-1-1.html

  • 相关阅读:
    #define用法详解
    memchr函数
    aiohttp模块1 client
    asyncio标准库7 Producer/consumer
    asyncio标准库6 Threads & Subprocess
    asyncio标准库5 TCP echo client and server
    asyncio标准库4 asyncio performance
    asyncio标准库3 HTTP client example
    asyncio标准库2 Hello Clock
    asyncio标准库1 Hello World
  • 原文地址:https://www.cnblogs.com/hdchangchang/p/3965393.html
Copyright © 2011-2022 走看看