原生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 相关文章推荐
JSDoc 介绍使用规范JsDoc的使用介绍
Feb 12 Javascript
将input file的选择的文件清空的两种解决方案
Oct 21 Javascript
详解AngularJS 模态对话框
Apr 07 Javascript
jquery插件autocomplete用法示例
Jul 01 Javascript
JavaScript实现父子dom同时绑定两个点击事件,一个用捕获,一个用冒泡时执行顺序的方法
Mar 30 Javascript
BootStrap Table前台和后台分页对JSON格式的要求
Jun 28 Javascript
JS实现前端缓存的方法
Sep 21 Javascript
Angular @HostBinding()和@HostListener()用法
Mar 05 Javascript
Vue+Mock.js模拟登录和表格的增删改查功能
Jul 26 Javascript
详解vuex数据传输的两种方式及this.$store undefined的解决办法
Aug 26 Javascript
vue ssr服务端渲染(小白解惑)
Nov 10 Javascript
vue 导航守卫和axios拦截器有哪些区别
Dec 19 Vue.js
将字符串中由空格隔开的每个单词首字母大写
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程序员最常犯的11个MySQL错误小结
2010/11/20 PHP
ubuntu下编译安装xcache for php5.3 的具体操作步骤
2013/06/18 PHP
WordPress迁移时一些常见问题的解决方法整理
2015/11/24 PHP
PHP响应post请求上传文件的方法
2015/12/17 PHP
JQuery 选项卡效果(JS与HTML的分离)
2010/04/01 Javascript
JavaScript Memoization 让函数也有记忆功能
2011/10/27 Javascript
javascript中函数作为参数调用的方法
2015/02/09 Javascript
JavaScript电子时钟倒计时
2016/01/09 Javascript
基于js中的原型、继承的一些想法
2016/08/10 Javascript
ES6记录异步函数的执行时间详解
2016/08/31 Javascript
微信小程序 获取微信OpenId详解及实例代码
2016/10/31 Javascript
jQuery选择器之子元素过滤选择器
2017/09/28 jQuery
Vue封装Swiper实现图片轮播效果
2018/02/06 Javascript
详解jQuery如何实现模糊搜索
2019/05/10 jQuery
Node.js利用Express实现用户注册登陆功能(推荐)
2020/10/26 Javascript
[01:42]辉夜杯战队访谈宣传片—FANTUAN
2015/12/25 DOTA
python实现系统状态监测和故障转移实例方法
2013/11/18 Python
python将xml xsl文件生成html文件存储示例讲解
2013/12/03 Python
Python中如何优雅的合并两个字典(dict)方法示例
2017/08/09 Python
TensorFlow实现AutoEncoder自编码器
2018/03/09 Python
python 读取摄像头数据并保存的实例
2018/08/03 Python
django中ORM模型常用的字段的使用方法
2019/03/05 Python
手把手教你使用Python创建微信机器人
2019/04/29 Python
Python中psutil的介绍与用法
2019/05/02 Python
Pytorch加载部分预训练模型的参数实例
2019/08/18 Python
python中return不返回值的问题解析
2020/07/22 Python
详解CSS3中nth-child与nth-of-type的区别
2017/01/05 HTML / CSS
工商企业管理专业自荐信范文
2014/04/12 职场文书
关于安全的标语
2014/06/10 职场文书
初中英语教师个人工作总结
2015/02/09 职场文书
2015年复活节活动总结
2015/02/27 职场文书
党员承诺书范文2015
2015/04/27 职场文书
道歉信范文
2015/05/12 职场文书
民事二审代理词
2015/05/25 职场文书
PHP命令行与定时任务
2021/04/01 PHP
Vue实现动态查询规则生成组件
2021/05/27 Vue.js