返回顶部:
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