返回顶部的感觉

闲着没事,又打了一遍练习的返回顶部,结果.一头撞进bug中.

2返回顶部

body{

height:2000px;

background-color:aqua;

}

#top{

width:50px;

height:50px;

background-color:yellowgreen;

border-radius:20%;

text-align:center;

line-height:50px;

font-size:12px;

/*隐藏*/

opacity:0;

/*定位*/

position:fixed;

bottom:50px;

right:50px;

transition:all1s;

}

啊,美丽的做过,亲亲我的二舅

返回顶部

vartopDiv=document.getElementById("top");

topDiv.onclick=function() {

document.documentElement.scrollTop=0;

}

//onscroll:当页面滚动时就会触发.

window.onscroll=function() {

if(document.documentElement.scrollTop>50) {

topDiv.style.opacity=1;

}else{

topDiv.style.opacity=0;

}

// 在标准w3c下，document.body.scrollTop恒为0，需要用document.documentElement.scrollTop来代替;

//如果你想定位鼠标相对于页面的绝对位置时，你会发现google里面1000篇文章里面有999.99篇会让你使用 event.clientX+document.body.scrollLeft，event.clientY+document.body.scrollTop， 如果你发现你的鼠标定位偏离了你的想象，请不要奇怪，这是再正常不过的事情。

//ie5.5之后已经不支持document.body.scrollX对象了。

//所以在编程的时候，请加上这样的判断

// if (document.body && document.body.scrollTop && document.body.scrollLeft){

//top=document.body.scrollTop;

//left=document.body.scrollleft;

//}

// if (document.documentElement && document.documentElement.scrollTop && document.documentElement.scrollLeft){

//top=document.documentElement.scrollTop;

//left=document.documentElement.scrollLeft;

//}