原生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编写COM组件的步骤
Mar 17 Javascript
一个关于javascript匿名函数的问题分析
Mar 30 Javascript
jquery validate.js表单验证入门实例(附源码)
Nov 10 Javascript
原生js实现放大镜特效
Mar 08 Javascript
Javascript将图片的绝对路径转换为base64编码的方法
Jan 11 Javascript
Vue2.0生命周期的理解
Aug 20 Javascript
vue项目移动端实现ip输入框问题
Mar 19 Javascript
Javascript中的this,bind和that使用实例
Dec 05 Javascript
使用JavaScript计算前一天和后一天的思路详解
Dec 20 Javascript
Json实现传值到后台代码实例
Jun 30 Javascript
vue axios封装httpjs,接口公用配置拦截操作
Aug 11 Javascript
OpenLayer3自定义测量控件MeasureTool
Sep 28 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
德生S2000收音机更换“钕铁硼”全频扬声器
2021/03/02 无线电
如何限制访问者的ip(PHPBB的代码)
2006/10/09 PHP
Fatal error: Call to undefined function curl_init()解决方法
2010/04/09 PHP
php set_magic_quotes_runtime() 函数过时解决方法
2010/07/08 PHP
简单的cookie计数器实现源码
2013/06/07 PHP
linux环境apache多端口配置虚拟主机的方法深入介绍
2013/06/09 PHP
thinkPHP订单数字提醒功能的实现方法
2016/12/01 PHP
YII2框架中添加自定义模块的方法实例分析
2020/03/18 PHP
在网页中屏蔽快捷键
2006/09/06 Javascript
推荐dojo学习笔记
2007/03/24 Javascript
jquery的map与get方法详解
2013/11/04 Javascript
javascript记录文本框内文字个数检测文字个数变化
2014/10/14 Javascript
JQuery学习总结【一】
2016/12/01 Javascript
canvas时钟效果
2017/02/16 Javascript
微信小程序-横向滑动scroll-view隐藏滚动条
2017/04/20 Javascript
JS代码实现电脑配置检测功能
2018/03/21 Javascript
Element Table的row-class-name无效与动态高亮显示选中行背景色
2018/11/30 Javascript
React-redux实现小案例(todolist)的过程
2019/09/29 Javascript
js+canvas实现两张图片合并成一张图片的方法
2019/11/01 Javascript
js函数和this用法实例分析
2020/03/13 Javascript
Vue实现附件上传功能
2020/05/28 Javascript
[04:41]2014DOTA2国际邀请赛 Liquid顺利突围晋级正赛
2014/07/09 DOTA
centos6.8安装python3.7无法import _ssl的解决方法
2018/09/17 Python
python Jupyter运行时间实例过程解析
2019/12/13 Python
python实现门限回归方式
2020/02/29 Python
Python爬虫获取op.gg英雄联盟英雄对位胜率的源码
2021/01/29 Python
真正了解CSS3背景下的@font face规则
2017/05/04 HTML / CSS
美国职棒大联盟的官方手套、球和头盔:Rawlings
2020/02/15 全球购物
英国在线购买轮胎、预订汽车、汽车维修和装配网站:Protyre
2020/04/12 全球购物
舞蹈专业大学生职业规划范文
2014/03/12 职场文书
办公经费申请报告
2015/05/15 职场文书
2019最新校园运动会广播稿!
2019/06/28 职场文书
浅析MongoDB之安全认证
2021/06/26 MongoDB
python开发的自动化运维工具ansible详解
2021/08/07 Python
Java数据开发辅助工具Docker与普通程序使用方法
2021/09/15 Java/Android
hive数据仓库新增字段方法
2022/06/25 数据库