原生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与CSS复习(三)
Jun 29 Javascript
jquery中dom操作和事件的实例学习 下拉框应用
Dec 01 Javascript
jQuery插件bgStretcher.js实现全屏背景特效
Jun 05 Javascript
JavaScript希尔排序、快速排序、归并排序算法
May 08 Javascript
jquery的checkbox,radio,select等方法小结
Aug 30 Javascript
jquery操作checkbox火狐下第二次无法勾选的解决方法
Oct 10 Javascript
详解微信小程序 页面跳转 传递参数
Dec 08 Javascript
Vue多种方法实现表头和首列固定的示例代码
Feb 02 Javascript
搭建element-ui的Vue前端工程操作实例
Feb 23 Javascript
JS栈stack类的实现与使用方法示例
Jan 31 Javascript
AjaxFileUpload.js实现异步上传文件功能
Apr 19 Javascript
微信小程序--特定区域滚动到顶部时固定的方法
Apr 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
用PHP调用数据库的存贮过程
2006/10/09 PHP
我的论坛源代码(八)
2006/10/09 PHP
php实现根据IP地址获取其所在省市的方法
2015/04/30 PHP
KindEditor在php环境下上传图片功能集成的方法示例
2020/07/20 PHP
js表数据排序 sort table data
2009/02/18 Javascript
js中 关于undefined和null的区别介绍
2013/04/16 Javascript
JQuery操作iframe父页面与子页面的元素与方法(实例讲解)
2013/11/20 Javascript
用js模拟struts2的多action调用示例
2014/05/19 Javascript
c#+jquery实现获取radio和checkbox的值
2020/09/12 Javascript
javascript中call,apply,bind的用法对比分析
2015/02/12 Javascript
jquery.fastLiveFilter.js实现输入自动过滤的方法
2015/08/11 Javascript
jqGrid 学习笔记整理——进阶篇(一 )
2016/04/17 Javascript
省市选择的简单实现(基于zepto.js)
2016/06/21 Javascript
浅析Bootstrap验证控件的使用
2016/06/23 Javascript
Javascript 动态改变imput type属性
2016/11/01 Javascript
BootStrap Fileinput上传插件使用实例代码
2017/07/28 Javascript
JavaScript中var、let、const区别浅析
2018/06/24 Javascript
微信小程序JS加载esmap地图的实例详解
2019/09/04 Javascript
Layui 数据表格批量删除和多条件搜索的实例
2019/09/04 Javascript
关于vue-cli3打包代码后白屏的解决方案
2020/09/02 Javascript
[02:42]DOTA2英雄基础教程 杰奇洛
2013/12/23 DOTA
[14:24]Optic Gaming vs PSG LGD BO3
2018/06/07 DOTA
python使用MySQLdb访问mysql数据库的方法
2015/08/03 Python
numpy中的ndarray方法和属性详解
2019/05/27 Python
Pytorch实现GoogLeNet的方法
2019/08/18 Python
PyQt5 closeEvent关闭事件退出提示框原理解析
2020/01/08 Python
tensorflow2.0保存和恢复模型3种方法
2020/02/03 Python
python字符串常用方法及文件简单读写的操作方法
2020/03/04 Python
判断Threading.start新线程是否执行完毕的实例
2020/05/02 Python
Python2.x与3​​.x版本有哪些区别
2020/07/09 Python
Django多数据库联用实现方法解析
2020/11/12 Python
美国益智玩具购物网站:Fat Brain Toys
2017/11/03 全球购物
美国克罗格超市在线购物:Kroger
2019/06/21 全球购物
美国精品地毯网站:Boutique Rugs
2020/03/04 全球购物
酒吧创业计划书
2014/01/18 职场文书
大学生自我鉴定书
2014/03/24 职场文书