原生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 相关文章推荐
基于jQuery的JavaScript模版引擎JsRender使用指南
Dec 29 Javascript
自定义百度分享的分享按钮
Mar 18 Javascript
jQuery中$(function() {});问题详解
Aug 10 Javascript
javascript学习总结之js使用技巧
Sep 02 Javascript
根据user-agent判断蜘蛛代码黑帽跳转代码(js版与php版本)
Sep 14 Javascript
jQuery validate插件submitHandler提交导致死循环解决方法
Jan 21 Javascript
利用JS如何计算字符串所占字节数示例代码
Sep 13 Javascript
JS获取并处理php数组的方法实例分析
Sep 04 Javascript
JS函数内部属性之arguments和this实例解析
Oct 07 Javascript
ES6 Array常用扩展的应用实例分析
Jun 26 Javascript
vue-cli3 取消eslint校验代码的解决办法
Jan 16 Javascript
JS写滑稽笑脸运动效果
May 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
PHP5.3以上版本安装ZendOptimizer扩展
2015/03/27 PHP
在PHP中输出JS语句以及乱码问题的解决方案
2019/02/13 PHP
捕获关闭窗口的脚本
2009/01/10 Javascript
javascript forEach通用循环遍历方法
2010/10/11 Javascript
jQuery实现的Email中的收件人效果(按del键删除)
2011/03/20 Javascript
js性能优化 如何更快速加载你的JavaScript页面
2012/03/17 Javascript
jquery命令汇总,方便使用jquery的朋友
2012/06/26 Javascript
一个可拖拽列宽表格实例演示
2012/11/26 Javascript
基于jQuery中对数组进行操作的方法
2013/04/16 Javascript
只需20行代码就可以写出CSS覆盖率测试脚本
2013/04/24 Javascript
优化Jquery,提升网页加载速度
2013/11/14 Javascript
基于jQuery和CSS3制作响应式水平时间轴附源码下载
2015/12/20 Javascript
js事件源window.event.srcElement兼容性写法(详解)
2016/11/25 Javascript
jQuery弹出窗口简单实现代码
2017/03/09 Javascript
全选复选框JavaScript编写小结(附代码)
2017/08/16 Javascript
解决Vue 浏览器后退无法触发beforeRouteLeave的问题
2017/12/24 Javascript
详解node.js 下载图片的 2 种方式
2018/03/02 Javascript
微信小程序实现简单跑马灯效果
2020/05/26 Javascript
每天学点Vue源码之vm.$mount挂载函数
2019/03/11 Javascript
jquery validate 实现动态增加/删除验证规则操作示例
2019/10/28 jQuery
[00:57]深扒TI7聊天轮盘语音出处5
2017/05/11 DOTA
python抓取某汽车网数据解析html存入excel示例
2013/12/04 Python
Python调用百度根据经纬度查询地址的示例代码
2019/07/07 Python
python控制台实现tab补全和清屏的例子
2019/08/20 Python
CSS3教程(9):设置RGB颜色
2009/04/02 HTML / CSS
JBL美国官方商店:扬声器、耳机等
2019/12/01 全球购物
JavaScript实现页面动态验证码的实现示例
2021/03/23 Javascript
秸秆管理实施方案
2014/03/15 职场文书
调研座谈会发言材料
2014/08/23 职场文书
财务助理岗位职责范本
2014/10/09 职场文书
2014年办公室文员工作总结
2014/11/12 职场文书
优秀党员事迹材料
2014/12/18 职场文书
酒店前台辞职书
2015/02/26 职场文书
2015年学校德育工作总结
2015/04/22 职场文书
2017公司年会主持人开幕词
2016/03/04 职场文书
Redis入门教程详解
2021/08/30 Redis