仿淘宝回到顶部效果的JavaScript代码分享
发布于
by
本篇文章给大家带来的内容是仿淘宝回到顶部效果的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();
}
详细代码如下：
<!DOCTYPEhtml>
<html>
<head>
<metacharset=”UTF-8″>
<metaname=”viewport”content=”width=device-width,initial-scale=1.0″>
<metahttp-equiv=”X-UA-Compatible”content=”ie=edge”>
<title>返回顶部效果</title>
<style>
.slider-bar{
position:absolute;
left:47%;
top:300px;
margin-left:600px;
width:45px;
height:130px;
background-color:pink;
cursor:pointer;
}
.w{
width:1100px;
margin:10pxauto;
}
.header{
height:150px;
background-color:purple;
}
.banner{
height:250px;
background-color:skyblue;
}
.main{
height:1000px;
background-color:yellowgreen;
}
span{
display:none;
position:absolute;
bottom:0;
}
</style>
</head>
<body>
<div>
<span>返回顶部</span>
</div>
<divclass=”headerw”>头部区域</div>
<divclass=”bannerw”>banner区域</div>
<divclass=”mainw”>主体部分</div>
<script>
//querySelector()方法返回匹配指定选择器（）的第一个元素，传的必须是字符串
varsliderbar=document.querySelector(‘.slider-bar’);
varbanner=document.querySelector(‘.banner’);
varbannerTop=banner.offsetTop;//banner模块距离顶部的长度
varsliderbarTop=sliderbar.offsetTop-bannerTop;//侧边栏固定后距离顶部的长度
varmain=document.querySelector(‘.main’);
vargoBack=document.querySelector(‘.goBack’);
varmainTop=main.offsetTop;//main模块距离顶部的长度
//scroll屏幕发生滚动事件时执行
document.addEventListener(‘scroll’,function(){
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’;
}
if(window.pageYOffset>=mainTop){//当用户滚到main模块时显示返回顶部按钮
goBack.style.display=’block’;
}else{
goBack.style.display=’none’;
}
});
sliderbar.addEventListener(‘click’,function(){
animate(window,0);
})
/*动画函数：
*obj做动画的对象（这里就是指window）
*target目标位置（顶部）
*callback回调函数（没有传参的话就不执行）
*/
functionanimate(obj,target,callback){
clearInterval(obj.timer);//先清除定时器，保证只有一个定时器在执行，以免出现bug
obj.timer=setInterval(function(){
//window.pageYOffset距离顶部的距离（是负的）
varstep=(target-window.pageYOffset)/10;//step步长（让页面速度逐渐变慢的滑动上去）
step=step>0?Math.ceil(step):Math.floor(step);//step并不总是整数。大于零向上取整,小于零向下取整
if(window.pageYOffset==target){//当页面回到顶部后(即动画执行完)清除定时器
clearInterval(obj.timer);
//判断是否传了回调函数
/*if(callback){
callback();
}*/
//可以简写为下边这种。&&是短路运算符，存在callback（即第一个式子为true）时才会继续执行callback()
callback&&callback();
}
//window.scroll(x,y)滚动到文档特定位置
window.scroll(0,window.pageYOffset+step);
},15);
}
</script>
</body>
</html>
类别：WordPress函数讲解、
本文收集自互联网，转载请注明来源。
如有侵权，请联系 wper_net@163.com 删除。
猜你喜欢GUESS YOU LIKE
还没有任何评论，赶紧来占个楼吧！