原生js实现淘宝首页点击按钮缓慢回到顶部效果
JS 实现 效果 原生 点击 按钮 缓慢 淘宝
2023-06-13 09:15:24 时间
淘宝首页的回到顶部按钮是这样的:下拉到一定距离后按钮才显示出来,鼠标放到按钮上时,按钮背景会变成灰色,并且图标变成了文字。点击按钮缓慢回到顶部
我们先分析下实现这样的效果需要添加哪些事件。鼠标移进移出按钮,按钮表现发生变化,所以需要给按钮添加mouseover,mouseout事件。要侦听滚动条的变化,所以需要给window添加scroll事件,点击按钮回到顶部,按钮添加click事件。我们将事件处理程序封装成三个函数moveIn,moveOut,goTop;
下面先给出html/css代码
复制代码代码如下:
我们先分析下实现这样的效果需要添加哪些事件。鼠标移进移出按钮,按钮表现发生变化,所以需要给按钮添加mouseover,mouseout事件。要侦听滚动条的变化,所以需要给window添加scroll事件,点击按钮回到顶部,按钮添加click事件。我们将事件处理程序封装成三个函数moveIn,moveOut,goTop;
下面先给出html/css代码
<divclass="container">
<divclass="header">头部</div>
<divclass="content">主要内容,高度是2000px</div>
<divclass="footer>底部</div>
<divid="btn">返回顶部</div>
</div>
.container{width:980px;margin:0auto;height:auto;background:#aaa;}
.content{height:2000px;border:1pxsolidblue;}
#btn{
position:fixed;
bottom:50px;
right:0;
width:54px;
height:55px;
background:url(icons.png)no-repeat0-110px;}//背景图可随意找一张
font-size:12px;
line-height:55px;
text-align:center;
text-indent:-9999em;
cursor:pointer;
display:none;
下面是完整的js代码
window.addEventListener("load",function(){
varbtn=document.getElementById("btn");
btn.addEventListener("mouseover",moveIn,false);
btn.addEventListener("mouseout",moveOut,false);
functionmoveIn(){
btn.style.color="#ffffff";//修改的是内联样式,具有最高的优先级;
btn.style.textIndent="0em";
btn.style.backgroundImage="none";
btn.style.backgroundColor="#FF4401";
}
functionmoveOut(){
btn.style.textIndent="-9999em";
btn.style.backgroundImage="url(icons.png)";
}
functiongoTop(acceleration,time){//修改参数可调整返回顶部的速度
acceleration=acceleration||0.1;
time=time||10;
varspeed=1+acceleration;
functiongetScrollTop(){//取得滚动条的竖直距离
returndocument.documentElement.scrollTop||document.body.scrollTop;
}
functionsetScrollTop(value){//设置滚动条的竖直距离,实现效果的关键就是在很短的间隔时间内不断地修改滚动条的竖直距离,以实现滚动效果
document.documentElement.scrollTop=value;
document.body.scrollTop=value;
}
window.onscroll=function(){
varscrollTop=getScrollTop();
if(scrollTop>100){//判断滚动条距离窗口顶部多远时显示出来,这里是100px
btn.style.display="block";
}else{
btn.style.display="none";
}
};
btn.onclick=function(){
vartimer=setInterval(function(){
setScrollTop(Math.floor(getScrollTop()/speed));//这行代码是关键,取得滚动条竖直距离,除以speed后再给滚动条设置竖直距离
if(getScrollTop()==0)
clearInterval(timer);
},time);
};
}
goTop(0.2,8);
},false);
当然,还有其他的实现方法,下面给出其他方法的关键代码
btn.onclick=function(){
clearInterval(timer);
vartimer=setInterval(function(){
varnow=scrollTop;//滚动条竖直距离
speed=(0-now)/10;
speed=Math.floor(speed);
if(now==0);
clearInterval(timer);
document.documentElement.scrollTop=now+speed;//标准模式下的浏览器
document.body.scrollTop=now+speed;//怪异模式下的浏览器
},15);
}
这里的代码主要还是参考了网上其他资源,再加了一点自己的理解。当然还有其他实现方法,比如JavaScript最早时间就支持的window.scrollTo()。用jQ来实现的话代码量将会变得很少,可参看w3cplus
个人觉得,先学好原生JavaScript,比如搞清楚数据类型,闭包,继承,作用域,DOM,CSS,事件处理,Ajax等,用熟练后学习其他框架将会容易很多。
相关文章
- Fabric.js 使用纯色遮挡画布(前景色)
- html制作图片幻灯片效果代码,【JS+CSS3】实现带预览图幻灯片效果的示例代码
- 原生 JS 实现 HTML 转 Markdown,以及其实现逻辑(html2md.js 或 html2markdown.js)
- js+html实现遮罩层效果详解编程语言
- 使用 JS 操作 Redis:实现强大数据存储.(js调用redis)
- 关于无限分级(ASP+数据库+JS)的实现代码
- 用js实现控制内容的向上向下滚动效果
- 用JS实现网页元素阴影效果的研究总结
- js文件中调用js的实现方法小结
- JS拖动效果实现代码比较简单
- Cookies欺骗漏洞的防范方法(vbs+js实现)
- 纯js实现背景图片切换效果代码
- js网页侧边随页面滚动广告效果实现
- js写一个弹出层并锁屏效果实现代码
- JS打开图片另存为对话框实现代码
- JS判断不同分辨率调用不同的CSS样式文件实现思路及测试代码
- jquery.blockUI.js上传滚动等待效果实现思路及代码
- 博客侧边栏模块跟随滚动条滑动固定效果的实现方法(js+jquery等)
- JS实现标签页效果(配合css)
- 基于jquery实现拆分姓名的方法(纯JS版)
- js网页版计算器的简单实现
- js下拉框二级关联菜单效果代码具体实现
- js获取input标签的输入值实现代码
- Js去掉字符串中的空格(实现代码)
- JS对象转换为Jquery对象实现代码
- js实现日期级联效果
- js生成的验证码的实现与技术分析
- js实现在同一窗口浏览图片