网络 网站深圳网络营销策划公司
正常的animate动画函数一般是左右移动，对于返回顶部的效果，显然需要上下移动。
而且涉及到页面卷上去的尺寸，并且是垂直方向。
所以主体是window.pageYoffset
把原先的animate函数里面的obj.offsetLeft改成window.pageyoffset
注意，原先的调整定位的left值，变成了现在的调用window.scroll这个api
window.scroll(x-coord, y-coord)
x-coord值表示你想要置于左上角的像素点的横坐标。y-coord值表示你想要置于左上角的像素点的纵坐标。
所以最主要的就是在原来的基础上修改animate函数
最后给goback这个span添加一个点击事件，然后animate(window,0);
<style>.w {width: 1200px;margin: 10px auto;}.header {height: 150px;background-color: purple;}.banner {height: 250px;background-color: skyblue;}.main {height: 1000px;background-color: pink;}.slider-bar {position: absolute;left: 50%;top: 300px;margin-left: 600px;width: 45px;height: 130px;background-color: pink;}span {display: none;background-color: red;position: absolute;bottom: 0;}</style>
</head><body><div class="slider-bar"><span class="goBack">返回顶部</span></div><div class="header w">头部区域</div><div class="banner w">banner区域</div><div class="main w">主体部分</div><script>var sliderbar = document.querySelector('.slider-bar');var banner = document.querySelector('.banner');var main = document.querySelector('.main');var goback = document.querySelector('.goBack');var sliderbartop = sliderbar.offsetTop;var sliderbarfixedtop = sliderbartop - banner.offsetTop;document.addEventListener('scroll', function() {if (window.pageYOffset > banner.offsetTop) {sliderbar.style.position = 'fixed';sliderbar.style.top = sliderbarfixedtop + 'px';} else {sliderbar.style.position = 'absolute';sliderbar.style.top = '300px';}if (window.pageYOffset > main.offsetTop) {goback.style.display = 'block';} else {goback.style.display = 'none';}})function animate(obj, target, callback) {// console.log(callback); callback = function() {} 调用的时候 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);}goback.addEventListener('click', function() {// 因为是窗口滚动 所以window是对象，并且target是0animate(window, 0);})</script>
</body>