原生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 相关文章推荐
JS 实现双色表格实现代码
Nov 24 Javascript
js textarea自动增高并隐藏滚动条
Dec 16 Javascript
jQuery替换字符串(实例代码)
Nov 13 Javascript
JavaScript中的时间处理小结
Feb 24 Javascript
JavaScript中实现键值对应的字典与哈希表结构的示例
Jun 12 Javascript
jquery动态遍历Json对象的属性和值的方法
Jul 27 Javascript
一个极为简单的requirejs实现方法
Oct 20 Javascript
用JavaScript和jQuery实现瀑布流
Mar 19 Javascript
AngularJS日程表案例详解
Aug 15 Javascript
如何获取TypeScript的声明文件.d.ts
May 01 Javascript
在vue中获取微信支付code及code被占用问题的解决方法
Apr 16 Javascript
小程序识别身份证,银行卡,营业执照,驾照的实现
Nov 05 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
PHP数据库开发知多少
2006/10/09 PHP
详解在PHP的Yii框架中使用行为Behaviors的方法
2016/03/18 PHP
php实现基于openssl的加密解密方法
2016/09/30 PHP
javascript parseInt() 函数的进制转换注意细节
2013/01/08 Javascript
jQuery实现切换字体大小的方法
2015/03/10 Javascript
javascript生成大小写字母
2015/07/03 Javascript
jQuery Validate表单验证入门学习
2015/12/18 Javascript
JavaScript知识点总结之如何提高性能
2016/01/15 Javascript
EasyUi中的Combogrid 实现分页和动态搜索远程数据
2016/04/01 Javascript
开启BootStrap学习之旅
2016/05/04 Javascript
jQuery实现上传图片前预览效果功能
2017/08/03 jQuery
浅谈webpack打包生成的bundle.js文件过大的问题
2018/02/22 Javascript
element-ui 中的table的列隐藏问题解决
2018/08/24 Javascript
JavaScript Dom 绑定事件操作实例详解
2019/10/02 Javascript
基于JavaScript获取url参数2种方法
2020/04/17 Javascript
js实现三角形粒子运动
2020/09/22 Javascript
python错误处理详解
2014/09/28 Python
Python基于FTP模块实现ftp文件上传操作示例
2018/04/23 Python
对Python中Iterator和Iterable的区别详解
2018/10/18 Python
python从子线程中获得返回值的方法
2019/01/30 Python
Python实现密码薄文件读写操作
2019/12/16 Python
Pytorch自定义Dataset和DataLoader去除不存在和空数据的操作
2021/03/03 Python
css3 响应式媒体查询的示例代码
2019/09/25 HTML / CSS
CSS3 函数技巧 用css 实现js实现的事情(clac Counters Tooltip)
2017/08/15 HTML / CSS
Waterford美国官网:爱尔兰水晶制品品牌
2017/04/26 全球购物
servlet面试题
2012/08/20 面试题
导游的职业规划书范文
2013/12/27 职场文书
幼儿园教师个人反思
2014/01/30 职场文书
共产党员承诺书
2014/03/25 职场文书
2014年新生军训方案
2014/05/01 职场文书
农民工讨薪标语
2014/06/26 职场文书
同学会感言
2015/07/30 职场文书
初中同学会致辞
2015/08/01 职场文书
缅怀先烈主题班会
2015/08/14 职场文书
创业计划书之美容店
2019/09/16 职场文书
动画《新网球王子 U-17 WORLD CUP》希腊队PV公开
2022/04/02 日漫