仿淘宝回到顶部效果的JavaScript代码分享

本篇文章给大家带来的内容是仿淘宝回到顶部效果的JavaScript代码。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。

需求：当滚动条到一定位置时侧边栏固定在某个位置，再往下滑动到某一位置时显示回到顶部按钮。点击按钮后页面会动态滑到顶部，速度由快到慢向上滑。

思路：

1、页面加载完毕才能执行js代码

可以将js代码写在最下边（本次回顶示例是用的这种）

想写在上边可以用下边这两种：

①window.onload=function(){…}

②window.addEventListener(‘load',function(){…})

2、获取需要用到的元素

3、绑定滚动事件scroll

当用户滚到banner模块时使侧边栏变为固定状态

if(window.pageYOffset>=bannerTop){//window.pageYOffset屏幕被滚上去的距离

sliderbar.style.position='fixed';//当用户滚到banner模块时使侧边栏变为固定状态

sliderbar.style.top=sliderbarTop+'px';

}else{

sliderbar.style.position='absolute';

sliderbar.style.top='300px';

}

当用户滚到main模块时显示返回顶部按钮

if(window.pageYOffset>=mainTop){//当用户滚到main模块时显示返回顶部按钮

goBack.style.display='block';

}else{

goBack.style.display='none';

}

4、绑定点击事件click

点击返回顶部按钮后页面会动态滑到顶部，速度由快到慢向上滑动

sliderbar.addEventListener(‘click',function(){

animate(window,0);

})

5、关于动画函数animate(obj,target,callback)

这里obj对象即是window；target目标位置即是0；callback是回调函数，没传参的话就可以忽略

设置一个定时器setInterval();

声明一个step作为步长值，值为顶部位置到当前滚动条位置之差除以10（step会越来越小，滚动速度也就越来越慢，实现了滚动条的速度由快到慢的滑上去）

varstep=(target-window.pageYOffset)/10;

然而step并不总是整数，当step不是整数时可以让滚动条再往前走一丢丢。滚动条可以上下滑动，所以step可能大于零也可能小于零。大于零向上取整,小于零向下取整

step=step>0?Math.ceil(step):Math.floor(step);

window.scroll(x,y)滚动到文档特定位置，定时器每次调用函数都会往上滑一点

window.scroll(0,window.pageYOffset+step);

判断动画是否执行完毕，如果执行完毕则关闭定时器clearInterval();

if(window.pageYOffset==target){//当页面回到顶部后(即动画执行完)清除定时器

clearInterval(obj.timer);

//判断是否传了回调函数

/*if(callback){

callback();

}*/

//可以简写为下边这种。&&是短路运算符，存在callback（即第一个式子为true）时才会继续执行callback()

callback&&callback();

}

详细代码如下：

头部区域