原生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 jquery数组介绍
Jul 15 Javascript
用javascript判断IE版本号简单实用且向后兼容
Sep 11 Javascript
JavaScript使用ActiveXObject访问Access和SQL Server数据库
Apr 02 Javascript
如何使用jQuery技术开发ios风格的页面导航菜单
Jul 29 Javascript
Bootstrap轮播插件简单使用方法介绍
Jun 21 Javascript
深入理解JS正则表达式---分组
Jul 18 Javascript
EasyUI中在表单提交之前进行验证
Jul 19 Javascript
js上下视差滚动简单实现代码
Mar 07 Javascript
JavaScript基于扩展String实现替换字符串中index处字符的方法
Jun 13 Javascript
EasyUI创建人员树的实例代码
Sep 15 Javascript
vue 数组和对象不能直接赋值情况和解决方法(推荐)
Oct 25 Javascript
JS html事件冒泡和事件捕获操作示例
May 01 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和Mysqlweb应用开发核心技术-第1部分 Php基础-2 php语言介绍
2011/07/03 PHP
基于python发送邮件的乱码问题的解决办法
2013/04/25 PHP
php实现文件下载功能的几个代码分享
2014/05/10 PHP
php中替换字符串中的空格为逗号','的方法
2014/06/09 PHP
php微信公众号开发之现金红包
2018/04/16 PHP
php创建类并调用的实例方法
2019/09/25 PHP
JavaScrip实现PHP print_r的数功能(三种方法)
2013/11/12 Javascript
理解Javascript图片预加载
2016/02/23 Javascript
js实现可控制左右方向的无缝滚动效果
2016/05/29 Javascript
BootStrap下拉菜单和滚动监听插件实现代码
2016/09/26 Javascript
jQuery事件详解
2017/02/23 Javascript
jQuery事件_动力节点Java学院整理
2017/07/05 jQuery
Vue resource中的GET与POST请求的实例代码
2017/07/21 Javascript
jQuery选取所有复选框被选中的值并用Ajax异步提交数据的实例
2017/08/04 jQuery
基于node搭建服务器,写接口,调接口,跨域的实例
2018/05/13 Javascript
vue中使用axios post上传头像/图片并实时显示到页面的方法
2018/09/27 Javascript
深入理解基于vue-cli的webpack打包优化实践及探索
2019/10/14 Javascript
微信小程序如何实现在线客服功能
2019/10/16 Javascript
在Vue中使用Echarts实例图的方法实例
2020/10/10 Javascript
Python简单实现查找一个字符串中最长不重复子串的方法
2018/03/26 Python
Python逐行读取文件内容的方法总结
2020/02/14 Python
Python中常见的数制转换有哪些
2020/05/27 Python
用ldap作为django后端用户登录验证的实现
2020/12/07 Python
Python创建自己的加密货币的示例
2021/03/01 Python
英国现代、当代和设计师家具店:Furntastic
2020/07/18 全球购物
编码实现字符串转整型的函数
2012/06/02 面试题
自主招生教师推荐信
2014/05/10 职场文书
霸气押韵的班级口号
2014/06/09 职场文书
新闻学专业求职信
2014/07/28 职场文书
停车位租赁协议书
2014/09/24 职场文书
联欢会开场白
2015/06/01 职场文书
物业管理交接协议书
2016/03/24 职场文书
2019朋友新婚祝福语精选
2019/10/10 职场文书
导游词之西递宏村
2019/12/10 职场文书
volatile保证可见性及重排序方法
2022/08/05 Java/Android
微软Win11 全新照片应用面向 Dev预览版推出 新版本上手体验图集
2022/09/23 数码科技