返回顶部：
①滚动窗口至文档中的特定位置
②window.scroll(x,y)
③注意，里面的x 和 y 不跟单位，直接写数字
案例分析：
带有动画的返回顶部
①此时可以继续使用我们封装的动画函数
②只需要把所有的 left 相关的值改为 跟页面垂直滚动距离相关就可以了
③页面滚动了多少，可以通过 window.pageYoffset 得到
④最后是页面滚动，使用 window.scroll (x, y)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .slide-bar{ 45px; height:130px; margin-left:600px; position:absolute; left:50%; top:300px; background-color: pink; } .header{ 1200px; height:150px; background-color: purple; margin:10px auto; } .banner{ 1200px; height:250px; background-color: skyblue; margin:10px auto; } .main{ 1200px; height:1000px; background-color: yellowgreen; margin:10px auto; } span{ position:absolute; bottom:0; display:none; } </style> </head> <body> <div class="slide-bar"> <span class="goBack">返回顶部</span> </div> <div class="header">头部区域</div> <div class="banner">banner区域</div> <div class="main">主体区域</div> </body> </html> <script> var slideBar=document.querySelector(".slide-bar"); var banner=document.querySelector(".banner"); var bannerTop=banner.offsetTop; //banner到达页面顶部时，页面被卷去的头部的大小，一定要写到滚动的外面 var slideBarTop=slideBar.offsetTop-bannerTop; //固定定位之后，应该变化的数值 var main=document.querySelector(".main"); var goBack=document.querySelector(".goBack"); var mainTop=main.offsetTop; //1,页面滚动事件 scroll document.addEventListener("scroll",function () { if (window.pageYOffset >= bannerTop) { slideBar.style.position="fixed"; slideBar.style.top=slideBarTop+"px"; } else{ slideBar.style.position="absolute"; slideBar.style.top=300+"px"; } //2，当页面滚动到main盒子，就显示 goBack 模块（“返回顶部”） if (window.pageYOffset >=mainTop) { goBack.style.display="block"; } else{ goBack.style.display="none"; } //3，当我们点击了返回顶部模块，就让窗口滚动到页面的最上方 goBack.addEventListener("click",function () { animate(window,0); }) function animate(obj, target, callback) { // 先清除以前的定时器，只保留当前的一个定时器执行 clearInterval(obj.timer); obj.timer = setInterval(function() { // 步长值写到定时器的里面 // 把我们步长值改为整数 不要出现小数的问题 // var step = Math.ceil((target - obj.offsetLeft) / 10); var step = (target - window.pageYOffset) / 10; step = step > 0 ? Math.ceil(step) : Math.floor(step); if (window.pageYOffset == target) { // 停止动画 本质是停止定时器 clearInterval(obj.timer); // 回调函数写到定时器结束里面 // if (callback) { // // 调用函数 // callback(); // } callback && callback(); } // 把每次加1 这个步长值改为一个慢慢变小的值 步长公式：(目标值 - 现在的位置) / 10 // obj.style.left = obj.offsetLeft + step + 'px'; window.scroll(0,window.pageYOffset + step); }, 15); } }) </script>
