回到顶部 · Javascript核心基础

``` <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> *{ margin:0; } html,body{ width:100%; height: 300%; background:-webkit-linear-gradient(top,yellow,orange,orangered); /* background:linear-gradient(top,yellow,orange,orangered) */ } a{ text-decoration:none; color:#000; } a:hover,a:active,a:target,a:visited{ text-decoration:none; color:#000; } #goLink{ display:block; position:fixed; bottom:150px; right:50px; width:100px; height:100px; line-height:100px; text-align:center; background:#fcfcfc; border-radius:50%; opacity:0.5; filter:alpha(opacity=50); display:none; } #goLink:hover{ opacity:1; filter:alpha(opacity=100); } </style> </head> <body> <div id="target"></div>  <a href="voild:0" id="goLink">Top</a> <script> var goLink = document.getElementById("goLink"); //->回到顶部: //总时间(duration):500ms //频率(interval):多长时间走一步 //总距离(target):当前的位置(当前的scrollTop值)-目标的位置(0) //->步长(step)：每一次走的距离 target/duration->每1ms走的距离*interval->每一次走的距离 var duration = 500,interval=10,target=document.documentElement.scrollTop||document.body.scrollTop; var step = (target/duration)*interval; goLink.onclick = function(){ //->点后后让当前的go消失 this.style.display = "none"; window.onscroll = null; //->当点击go的时候，首先把每一步要走的步长计算出来 var timer = window.setInterval(function(){ var curTop = document.documentElement.scrollTop||document.body.scrollTop; if(curTop === 0){ window.clearInterval(timer); window.onscroll = shouldDisplay; return; } curTop -= step; document.documentElement.scrollTop = curTop; document.body.scrollTop = curTop; },interval); } //->开始GO按钮是不显示的，只有当浏览器卷去的高度超过一屏幕的高度的时候才会显示 // 只要浏览器的滚动条在滚动，我们就需要判断GO显示还是隐藏 //->浏览器滚动条滚动:拖动滚动条、鼠标滚轮、键盘上下键或则pageDown/pageUp键、点击滚动条的空白处或则箭头（自主操作的行为）...我们还可以通过JS控制scrollTop的值来实现滚动条的滚动 window.onscroll = shouldDisplay; function shouldDisplay(){ //->不管怎么操作的，只要滚动条动了就会触发这个行为 var curTop = document.documentElement.scrollTop||document.body.scrollTop; var curHeight = document.documentElement.clientHeight||document.body.clientHeight; goLink.style.display = curTop>curHeight?"block":"none"; } //扩展 //左侧楼层导航 //刚开始没有楼层导航，只有当一楼出现在视野中的时候，楼层导航才显示 //随着页面继续滚动，每一个楼层到达某个区域的时候，我们让楼层导航中的对影响跟着选中 //->当我们点击楼层导航中的某一项的时候，可以实现一个简单的动画，实现定位到具体的楼层 </script> </body> </html> ```