原生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合并数组的几种方法及优劣比较
Sep 19 Javascript
javascript 中__proto__和prototype详解
Nov 25 Javascript
JS获取时间的方法
Jan 21 Javascript
jQuery Validate 校验多个相同name的方法
May 18 jQuery
JavaScript实现二维坐标点排序效果
Jul 18 Javascript
JS按条件 serialize() 对应标签的使用方法
Jul 24 Javascript
解决微信二次分享不显示摘要和图片的问题
Aug 18 Javascript
利用Console来Debug的10个高级技巧汇总
Mar 26 Javascript
Vue.js样式动态绑定实现小结
Jan 24 Javascript
浅谈JS for循环中使用break和continue的区别
Jul 21 Javascript
openlayers实现地图测距测面
Sep 25 Javascript
关于Vue中$refs的探索浅析
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服务端图片生成缩略图的方法详解
2013/06/20 PHP
100多行PHP代码实现socks5代理服务器[2]
2016/05/05 PHP
php图像处理函数imagecopyresampled用法详解
2016/12/02 PHP
PHP利用正则表达式将相对路径转成绝对路径的方法示例
2017/02/28 PHP
php设计模式之策略模式实例分析【星际争霸游戏案例】
2020/03/26 PHP
PHP code 验证码生成类定义和简单使用示例
2020/05/27 PHP
详解new function(){}和function(){}() 区别分析
2008/03/22 Javascript
javascript中最常用的继承模式 组合继承
2010/08/12 Javascript
基于jQuery的公告无限循环滚动实现代码
2012/05/11 Javascript
jQuery中clearQueue()方法用法实例
2014/12/29 Javascript
jQuery实现带有洗牌效果的动画分页实例
2015/08/31 Javascript
jQuery文件上传控件 Uploadify 详解
2016/06/20 Javascript
AngularJS实现的select二级联动下拉菜单功能示例
2017/10/25 Javascript
javascript实现自由编辑图片代码详解
2019/06/21 Javascript
小程序websocket心跳库(websocket-heartbeat-miniprogram)
2020/02/23 Javascript
vscode 调试 node.js的方法步骤
2020/09/15 Javascript
在elementui中Notification组件添加点击事件实例
2020/11/11 Javascript
Python实现遍历数据库并获取key的值
2015/05/17 Python
Python使用matplotlib绘制动画的方法
2015/05/20 Python
Python 中的Selenium异常处理实例代码
2018/05/03 Python
Python中矩阵创建和矩阵运算方法
2018/08/04 Python
python实现弹窗祝福效果
2019/04/07 Python
python语言元素知识点详解
2019/05/15 Python
python实现贪吃蛇游戏源码
2020/03/21 Python
pandas数据拼接的实现示例
2020/04/16 Python
Python如何创建装饰器时保留函数元信息
2020/08/07 Python
巧用CSS3 border实现图片遮罩效果代码
2012/04/09 HTML / CSS
HTML5输入框下拉菜单功能的示例代码
2020/09/08 HTML / CSS
海外淘书首选:AbeBooks
2017/07/31 全球购物
英国高街奥特莱斯:Highstreet Outlet
2019/11/21 全球购物
Servlet的生命周期
2013/08/25 面试题
酒店办公室文员岗位职责
2013/12/18 职场文书
技能比赛获奖感言
2014/02/14 职场文书
2014年幼儿园工作总结
2014/11/10 职场文书
实验心得体会范文
2016/01/25 职场文书
js基于div丝滑实现贝塞尔曲线
2022/09/23 Javascript