返回顶部 js
返回頂部：
1.可以在網(wǎng)頁添加錨鏈接
2.利用js 可以實現(xiàn)動畫效果
<!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;width: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 {width:0;margin:0 auto;border-bottom:12px solid #FFF;border-left:12px solid #666;border-right:12px solid #666;}#goTop .gotop2 {width: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>關(guān)于onscroll：
scroll事件是在window對象上發(fā)生，但表示的是頁面相應(yīng)元素的變化，
在混雜模式下：可以通過<body>元素的scrollLeft/scrollTop監(jiān)控這一變化，
在標(biāo)準(zhǔn)模式下大多瀏覽器通過<html>元素反應(yīng)這一變化（safari仍基于body）
參考：藍(lán)色理想：http://bbs.blueidea.com/thread-2979799-1-1.html
轉(zhuǎn)載于:https://www.cnblogs.com/hdchangchang/archive/2012/12/19/3965393.html
創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎勵來咯，堅持創(chuàng)作打卡瓜分現(xiàn)金大獎總結(jié)
- 上一篇： volatile 和 sig_atomi
- 下一篇： 变量详解-----笔记