<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> .go-top{ position: fixed; right: 20px; bottom: 19px; width: 40px; height: 40px; background-color: darkgoldenrod; color: white; } .hide{ display: none; } </style> </head> <body onscroll="Func();"> <div> <h1>asdfafdasdf</h1> </div> <div> <a href="javascript:void(0)">返回顶部</a> </div> <script> function Func(){ var scrollTop = document.body.scrollTop;//body的滚动高度 var ii = document.getElementById('i2'); if(scrollTop>100){ ii.classList.remove('hide');//移除就是显示 }else{ ii.classList.add('hide'); } } function goTop(){ document.body.scrollTop=0; } </script> </body> </html>
案例十：
主要知识点：
//scroll 滚动；卷轴的意思
// scrollTop: 滚动条距离顶部高度
// scrollHeight: 文档高度:自身+padding
// clientTop: 边框高度
// clientHeight: 当前范围可视的高度:自身 + padding
//offset 印刷的意思
// offsetTop: 当前标签距离"顶部"的高度(body)
// 如果他的上一级没有postion,如果有则按照position的标签为主
// offsettHeight: 自身范围的高度:自身+padding+border
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div></div><!--头部--> <div><!--body--> <div> <div > <div>sdf</div><div>sdf</div><div>sdf</div><div>sdf</div><div>sdf</div><div>sdf</div><div>sdf</div><div>sdf</div> <div>sdf</div><div>sdf</div><div>sdf</div><div>sdf</div><div>sdf</div><div>sdf</div><div>sdf</div><div>sdf</div> <div>sdf</div><div>sdf</div><div>sdf</div><div>sdf</div><div>sdf</div><div>sdf</div><div>sdf</div><div>sdf</div> <div>sdf</div><div>sdf</div><div>sdf</div><div>sdf</div><div>sdf</div><div>sdf</div><div>sdf</div><div>sdf</div> <div>sdf</div><div>sdf</div><div>sdf</div><div>sdf</div><div>sdf</div><div>sdf</div><div>sdf</div><div>sdf</div> <div>sdf</div><div>sdf</div><div>sdf</div><div>sdf</div><div>sdf</div><div>sdf</div><div>sdf</div> <div>sdf</div><div>sdf</div><div>sdf</div><div>sdf</div><div>sdf</div><div>sdf</div><div>sdf</div><div>sdf</div> <div>sdf</div><div>sdf</div> </div> </div> </div> <script> var ii = document.getElementById('xo') console.log(ii.scrollTop) console.log(ii.scrollHeight) console.log(ii.clientTop) console.log(ii.clientHeight) console.log(ii.offsetTop) console.log(ii.offsetHeight) //scroll 滚动；卷轴的意思 // scrollTop: 滚动条距离顶部高度 // scrollHeight: 文档高度:自身+padding // clientTop: 边框高度 // clientHeight: 可见范围的高度:自身 + padding //offset 印刷的意思 // offsetTop: 当前标签距离"顶部"的高度(body) // 如果他的上一级没有postion,如果有则按照position的标签为主 // offsettHeight: 可见范围的高度:自身+padding+border </script> </body> </html>
好了，暂时就介绍到这里希望大家多写多练，主要是其中的逻辑，当然现在很多人都开始使用jquery了，大家也多注意。