原生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 相关文章推荐
修改发贴的编辑功能
Mar 07 Javascript
JavaScript小技巧整理篇(非常全)
Jan 26 Javascript
EasyUI创建对话框的两种方式
Aug 23 Javascript
jquery 删除节点 添加节点 找兄弟节点的简单实现
Dec 07 Javascript
bootstrap多种样式进度条展示
Dec 20 Javascript
jQuery.form.js的使用详解
Jun 14 jQuery
jQuery niceScroll滚动条错位问题的解决方法
Feb 03 jQuery
Vue 表情包输入组件的实现代码
Jan 21 Javascript
基于vue-cli 路由 实现类似tab切换效果(vue 2.0)
May 08 Javascript
解决 viewer.js 动态更新图片导致无法预览的问题
May 14 Javascript
JS实现简单的文字无缝上下滚动功能示例
Jun 22 Javascript
JavaScript中window和document用法详解
Jul 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
239军机修复记
2021/03/02 无线电
使用php+Ajax实现唯一校验实现代码[简单应用]
2011/11/29 PHP
PHP中将网页导出为Word文档的代码
2012/05/25 PHP
js+css使DIV始终居于屏幕中间 左下 左上 右上 右下的代码集合
2011/03/10 Javascript
div失去焦点事件实现思路
2014/04/22 Javascript
jfinal与bootstrap的登录跳转实战演习
2015/09/22 Javascript
jQuery使用模式窗口实现在主页面和子页面中互相传值的方法
2016/03/01 Javascript
JavaScript数据类型转换的注意事项
2016/07/31 Javascript
详解webpack分离css单独打包
2017/06/21 Javascript
react开发教程之React 组件之间的通信方式
2017/08/12 Javascript
node实现基于token的身份验证
2018/04/09 Javascript
JS实现的新闻列表自动滚动效果示例
2019/01/30 Javascript
解决pycharm双击但是无法打开的情况
2020/10/31 Javascript
[03:43]2014DOTA2西雅图国际邀请赛 newbee战队巡礼
2014/07/07 DOTA
从零学Python之引用和类属性的初步理解
2014/05/15 Python
python 采集中文乱码问题的完美解决方法
2016/09/27 Python
关于Python中空格字符串处理的技巧总结
2017/08/10 Python
CentOS下使用yum安装python-pip失败的完美解决方法
2017/08/16 Python
Python使用matplotlib实现绘制自定义图形功能示例
2018/01/18 Python
简单的python协同过滤程序实例代码
2018/01/31 Python
python3.x实现发送邮件功能
2018/05/22 Python
Python列表解析配合if else的方法
2018/06/23 Python
Python全局变量与局部变量区别及用法分析
2018/09/03 Python
pycharm访问mysql数据库的方法步骤
2019/06/18 Python
Python 多线程搜索txt文件的内容,并写入搜到的内容(Lock)方法
2019/08/23 Python
python数据库操作mysql:pymysql、sqlalchemy常见用法详解
2020/03/30 Python
python多线程semaphore实现线程数控制的示例
2020/08/10 Python
美国在线医疗分销商:MedEx Supply
2020/02/04 全球购物
博士研究生自我鉴定范文
2013/12/04 职场文书
物业管理计划书
2014/01/10 职场文书
营销部内勤岗位职责
2014/04/30 职场文书
贷款担保书范文
2014/05/13 职场文书
体育节口号
2014/06/19 职场文书
指导教师推荐意见
2015/06/05 职场文书
感恩教师主题班会
2015/08/12 职场文书
Python 数据可视化神器Pyecharts绘制图像练习
2022/02/28 Python