原生js实现淘宝首页点击按钮缓慢回到顶部效果


Posted in Javascript onApril 06, 2014

淘宝首页的回到顶部按钮是这样的:下拉到一定距离后按钮才显示出来,鼠标放到按钮上时,按钮背景会变成灰色,并且图标变成了文字。点击按钮缓慢回到顶部

我们先分析下实现这样的效果需要添加哪些事件。鼠标移进移出按钮,按钮表现发生变化,所以需要给按钮添加mouseover, mouseout事件。要侦听滚动条的变化,所以需要给window添加scroll事件,点击按钮回到顶部,按钮添加click事件。我们将事件处理程序封装成三个函数moveIn, moveOut, goTop;

下面先给出html/css代码

<div class="container"> 
<div class="header">头部</div> 
<div class="content">主要内容,高度是2000px</div> 
<div class="footer>底部</div> 
<div id="btn">返回顶部</div> 
</div>

.container { width: 980px; margin: 0 auto; height: auto; background: #aaa;} 
.content { height: 2000px; border: 1px solid blue; } 
#btn { 
position:fixed; 
bottom: 50px; 
right: 0; 
width: 54px; 
height: 55px; 
background: url(icons.png) no-repeat 0 -110px; } //背景图可随意找一张 
font-size: 12px; 
line-height: 55px; 
text-align: center; 
text-indent: -9999em; 
cursor: pointer; 
display: none;

下面是完整的js代码
window.addEventListener("load",function() { 
var btn = document.getElementById("btn"); 
btn.addEventListener("mouseover",moveIn, false); 
btn.addEventListener("mouseout", moveOut, false); function moveIn() { 
btn.style.color = "#ffffff"; //修改的是内联样式,具有最高的优先级; 
btn.style.textIndent = "0em"; 
btn.style.backgroundImage = "none"; 
btn.style.backgroundColor = "#FF4401"; 
} 
function moveOut() { 
btn.style.textIndent = "-9999em"; 
btn.style.backgroundImage = "url(icons.png)"; 
} 
function goTop(acceleration, time) { //修改参数可调整返回顶部的速度 
acceleration = acceleration || 0.1; 
time = time || 10; 
var speed = 1 + acceleration; 
function getScrollTop() { //取得滚动条的竖直距离 
return document.documentElement.scrollTop || document.body.scrollTop; 
} 
function setScrollTop(value) { //设置滚动条的竖直距离,实现效果的关键就是在很短的间隔时间内不断地修改滚动条的竖直距离,以实现滚动效果 
document.documentElement.scrollTop = value; 
document.body.scrollTop = value; 
} 
window.onscroll = function() { 
var scrollTop = getScrollTop(); 
if (scrollTop > 100) { //判断滚动条距离窗口顶部多远时显示出来,这里是100px 
btn.style.display = "block"; 
} else { 
btn.style.display = "none"; 
} 
}; 
btn.onclick = function () { 
var timer = setInterval(function() { 
setScrollTop(Math.floor(getScrollTop() / speed)); //这行代码是关键,取得滚动条竖直距离,除以speed后再给滚动条设置竖直距离 
if (getScrollTop() == 0) 
clearInterval(timer); 
}, time); 
}; 
} 
goTop(0.2, 8); 
}, false);

当然,还有其他的实现方法,下面给出其他方法的关键代码
btn.onclick = function() { 
clearInterval(timer); 
var timer = setInterval(function() { 
var now = 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); 
}

原生js实现淘宝首页点击按钮缓慢回到顶部效果 
这里的代码主要还是参考了网上其他资源,再加了一点自己的理解。当然还有其他实现方法,比如JavaScript最早时间就支持的window.scrollTo()。用jQ来实现的话代码量将会变得很少,可参看w3cplus

个人觉得,先学好原生JavaScript,比如搞清楚数据类型,闭包,继承,作用域,DOM,CSS,事件处理,Ajax等,用熟练后学习其他框架将会容易很多。

Javascript 相关文章推荐
ext实现完整的登录代码
Aug 08 Javascript
JQuery jsonp 使用示例代码
Aug 12 Javascript
URL地址中的#符号使用说明
Feb 12 Javascript
jquery 面包屑导航 具体实现
Jun 05 Javascript
JavaScript自定义数组排序方法
Feb 12 Javascript
JQuery使用$.ajax和checkbox实现下次不在通知功能
Apr 16 Javascript
在JavaScript中处理时间之setMinutes()方法的使用
Jun 11 Javascript
js过滤HTML标签完整实例
Nov 26 Javascript
js从外部获取图片的实现方法
Aug 05 Javascript
轻松掌握JavaScript装饰者模式
Aug 27 Javascript
利用Javascript实现简单的转盘抽奖
Feb 13 Javascript
解决vue项目,npm run build后,报路径错的问题
Aug 13 Javascript
将字符串中由空格隔开的每个单词首字母大写
Apr 06 #Javascript
当达到输入长度时表单自动切换焦点
Apr 06 #Javascript
javascript中的取反再取反~~没有意义
Apr 06 #Javascript
jQuery toggleClass应用实例(附效果图)
Apr 06 #Javascript
javascript数组操作总结和属性、方法介绍
Apr 05 #Javascript
JavaScript中的prototype和constructor简明总结
Apr 05 #Javascript
JavaScript中的typeof操作符用法实例
Apr 05 #Javascript
You might like
微信公众平台开发教程④ ThinkPHP框架下微信支付功能图文详解
2019/04/10 PHP
小议javascript 设计模式 推荐
2009/10/28 Javascript
IE6不能修改NAME问题的解决方法
2010/09/03 Javascript
菜鸟javascript基础资料整理2
2010/12/06 Javascript
js内置对象 学习笔记
2011/08/01 Javascript
js实现动态添加、删除行、onkeyup表格求和示例
2013/08/18 Javascript
使用JavaScript实现Java的List功能(实例讲解)
2013/11/07 Javascript
jQuery截取指定长度字符串代码
2014/08/21 Javascript
JavaScript队列、优先队列与循环队列
2016/11/14 Javascript
JS处理一些简单计算题
2018/02/24 Javascript
setTimeout与setInterval的区别浅析
2019/03/23 Javascript
关于layui flow loading占位图的实现方法
2019/09/21 Javascript
vue-cli —— 如何局部修改Element样式
2020/10/22 Javascript
用Javascript实现发送短信验证码间隔功能
2021/02/08 Javascript
[14:20]刀塔大凶女神互压各路奇葩屌丝
2014/05/16 DOTA
在Django框架中运行Python应用全攻略
2015/07/17 Python
详解python调度框架APScheduler使用
2017/03/28 Python
python3.6+django2.0+mysql搭建网站过程详解
2019/07/24 Python
pandas 对日期类型数据的处理方法详解
2019/08/08 Python
Python OpenCV实现鼠标画框效果
2020/08/19 Python
Python的条件锁与事件共享详解
2019/09/12 Python
使用sklearn对多分类的每个类别进行指标评价操作
2020/06/11 Python
建筑设计所实习生自我鉴定
2013/09/25 职场文书
店长岗位职责
2013/11/21 职场文书
公司财务总监岗位职责
2013/12/14 职场文书
2014年党员公开承诺书范文
2014/03/28 职场文书
党员群众路线个人整改措施思想汇报
2014/10/12 职场文书
2015年乡镇纪检工作总结
2015/04/22 职场文书
2015年底工作总结范文
2015/05/15 职场文书
小学音乐课教学反思
2016/02/18 职场文书
2016优秀青年志愿者事迹材料
2016/02/25 职场文书
委托书范本格式
2019/04/18 职场文书
创业计划书之烤红薯
2019/09/26 职场文书
导游词之宁夏贺兰山岩画
2019/11/08 职场文书
Redis Cluster 字段模糊匹配及删除
2021/05/27 Redis
使用Bandicam录制鼠标指针并附带点击声音,还可以添加点击动画效果
2022/04/11 数码科技