原生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 相关文章推荐
Javascript Jquery 遍历Json的实现代码
Mar 31 Javascript
JavaScript定义类或函数的几种方式小结
Jan 09 Javascript
js遍历td tr等html元素
Dec 13 Javascript
各种页面定时跳转(倒计时跳转)代码总结
Oct 24 Javascript
javascript实现网页子页面遍历回调的方法(涉及 window.frames、递归函数、函数上下文)
Jul 27 Javascript
JS命令模式例子之菜单程序
Oct 10 Javascript
jQuery web 组件 后台日历价格、库存设置的代码
Oct 14 Javascript
在 vue-cli v3.0 中使用 SCSS/SASS的方法
Jun 14 Javascript
JavaScript引用类型之基本包装类型实例分析【Boolean、Number和String】
Aug 09 Javascript
JavaScript创建防篡改对象的方法分析
Dec 30 Javascript
浅谈layui里的上传控件问题
Sep 26 Javascript
react quill中图片上传由默认转成base64改成上传到服务器的方法
Oct 30 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数组函数序列之array_keys() - 获取数组键名
2011/10/30 PHP
在PHP中运行Linux命令并启动SSH服务的例子
2014/06/12 PHP
PHP中strtr字符串替换用法详解
2014/11/26 PHP
php实现HTML实体编号与非ASCII字符串相互转换类实例
2016/11/02 PHP
PHP绕过open_basedir限制操作文件的方法
2018/06/10 PHP
PHP Swoole异步MySQL客户端实现方法示例
2019/10/24 PHP
lib.utf.js
2007/08/21 Javascript
CSS JavaScript 实现菜单功能 改进版
2008/12/09 Javascript
javascript 放大镜 v1.0 基于Yui2 实现的放大镜效果
2010/03/08 Javascript
jquery焦点图片切换(数字标注/手动/自动播放/横向滚动)
2013/01/24 Javascript
jQuery中:file选择器用法实例
2015/01/04 Javascript
JavaScript如何实现在文本框(密码框)输入提示语
2015/12/25 Javascript
基于JavaScript判断浏览器到底是关闭还是刷新(超准确)
2016/02/01 Javascript
javascript关于继承解析
2016/05/10 Javascript
终于实现了!精彩的jquery弹幕效果
2016/07/18 Javascript
jQuery实现的兼容性浮动层示例
2016/08/02 Javascript
JavaScript组合模式学习要点
2016/08/26 Javascript
jQuery实现的无限级下拉菜单功能示例
2016/09/12 Javascript
基于jQuery实现中英文切换导航条效果
2016/09/18 Javascript
JS操作时间 - UNIX时间戳的简单介绍(必看篇)
2017/08/16 Javascript
原生JS+HTML5实现跟随鼠标一起流动的粒子动画效果
2018/05/03 Javascript
如何更好的编写js async函数
2018/05/13 Javascript
vue实现word,pdf文件的导出功能
2018/07/31 Javascript
JS正则表达式验证端口范围(0-65535)
2020/01/06 Javascript
Vue解决echart在element的tab切换时显示不正确问题
2020/08/03 Javascript
apache部署python程序出现503错误的解决方法
2017/07/24 Python
python pygame模块编写飞机大战
2018/11/20 Python
详解python中list的使用
2019/03/15 Python
Django模型修改及数据迁移实现解析
2019/08/01 Python
Python openpyxl模块实现excel读写操作
2020/06/30 Python
Python HTMLTestRunner如何下载生成报告
2020/09/04 Python
C语言笔试题
2014/09/04 面试题
关联、聚合(Aggregation)以及组合(Composition)的区别
2012/02/29 面试题
大学国际贸易专业自荐信
2014/06/05 职场文书
2015年挂职锻炼个人总结
2015/10/22 职场文书
MySQL如何构建数据表索引
2021/05/13 MySQL