原生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 学习点滴记录
Apr 24 Javascript
js null,undefined,字符串小结
Aug 21 Javascript
jQuery 中使用JSON的实现代码
Dec 01 Javascript
基于SVG的web页面图形绘制API介绍及编程演示
Jun 28 Javascript
JS实现兼容性较好的随屏滚动效果
Nov 09 Javascript
JavaScript+html5 canvas制作的圆中圆效果实例
Jan 27 Javascript
js中json处理总结之JSON.parse
Oct 14 Javascript
JavaScript中从setTimeout与setInterval到AJAX异步
Feb 13 Javascript
Angular2 父子组件数据通信实例
Jun 22 Javascript
Vue.js点击切换按钮改变内容的实例讲解
Aug 22 Javascript
vue使用keep-alive实现组件切换时保存原组件数据方法
Oct 30 Javascript
Vue通过阿里云oss的url连接直接下载文件并修改文件名的方法
Dec 25 Vue.js
将字符串中由空格隔开的每个单词首字母大写
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中拷贝构造函数、赋值运算符重载
2012/07/25 PHP
PHP实现对二维数组某个键排序的方法
2016/09/14 PHP
确保Laravel网站不会被嵌入到其他站点中的方法
2019/10/18 PHP
Javascript实现的分页函数
2007/02/07 Javascript
cnblogs csdn 代码运行框实现代码
2009/11/02 Javascript
IE6浏览器下resize事件被执行了多次解决方法
2012/12/11 Javascript
jquery mobile实现拨打电话功能的几种方法
2013/08/05 Javascript
JavaScript获取function所有参数名的方法
2015/10/30 Javascript
详解Bootstrap的aria-label和aria-labelledby应用
2016/01/04 Javascript
三种AngularJS中获取数据源的方式
2016/02/02 Javascript
JS中Eval解析JSON字符串的一个小问题
2016/02/21 Javascript
jquery ztree实现模糊搜索功能
2016/02/25 Javascript
jquery Ajax实现Select动态添加数据
2017/06/08 jQuery
javascript定时器取消定时器及优化方法
2017/07/08 Javascript
js动态添加表格逐行添加、删除、遍历取值的实例代码
2018/01/25 Javascript
Node.js搭建WEB服务器的示例代码
2018/08/15 Javascript
Vue2.2.0+新特性整理及注意事项
2018/08/22 Javascript
Vue结合后台导入导出Excel问题详解
2019/02/19 Javascript
vue-cli项目使用mock数据的方法(借助express)
2019/04/15 Javascript
微信小程序商品详情页底部弹出框
2019/11/22 Javascript
如何手动实现一个 JavaScript 模块执行器
2020/10/16 Javascript
[53:15]Mineski vs iG 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
使用python为mysql实现restful接口
2018/01/05 Python
python使用PIL实现多张图片垂直合并
2019/01/15 Python
python树的同构学习笔记
2019/09/14 Python
如何搭建pytorch环境的方法步骤
2020/05/06 Python
tensorflow下的图片标准化函数per_image_standardization用法
2020/06/30 Python
python PIL模块的基本使用
2020/09/29 Python
制药工程专业毕业生推荐信
2013/12/24 职场文书
大学生创业策划书
2014/02/02 职场文书
宗教学大学生职业生涯规划范文
2014/02/08 职场文书
企业安全生产演讲稿
2014/05/09 职场文书
教师党员先进性教育自我剖析材料思想汇报
2014/09/24 职场文书
人事代理委托书
2014/09/27 职场文书
通知格式
2015/04/27 职场文书
MySQL中的布尔值,怎么存储false或true
2021/06/04 MySQL