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

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

2
2020-02-10 19:43:49

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

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

仿淘宝回到顶部效果的JavaScript代码分享 (https://www.wpmee.com/) javascript教程 第1张

思路:

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>

喜欢这个文章就点个赞分享给好友吧~

END
相关标签

发表评论

一次支付终身使用
免费版本更新
靠谱的技术支持