原生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 相关文章推荐
YUI Compressor压缩JavaScript原理及微优化
Jan 07 Javascript
js模拟C#中List的简单实例
Mar 06 Javascript
jquery插件开发之实现google+圈子选择功能
Mar 10 Javascript
node.js中的console.log方法使用说明
Dec 09 Javascript
jquery控制页面部分刷新的方法
Jun 24 Javascript
javascript日期处理函数,性能优化批处理
Sep 06 Javascript
jQuery-mobile事件监听与用法详解
Nov 23 Javascript
js实现模糊匹配功能
Feb 15 Javascript
微信小程序获取用户openId的实现方法
May 23 Javascript
使用ECharts实现状态区间图
Oct 25 Javascript
vue实现页面内容禁止选中功能,仅输入框和文本域可选
Nov 09 Javascript
jQuery+ajax实现文件上传功能
Dec 22 jQuery
将字符串中由空格隔开的每个单词首字母大写
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实现和c#一致的DES加密解密实例
2017/07/24 PHP
php实现的mongoDB单例模式操作类
2018/01/20 PHP
自写的利用PDO对mysql数据库增删改查操作类
2018/02/19 PHP
CodeIgniter框架钩子机制实现方法【hooks类】
2018/08/21 PHP
JQery 渐变图片导航效果代码 漂亮
2010/01/01 Javascript
Javascript延迟执行实现方法(setTimeout)
2010/12/30 Javascript
JavaScript判断变量是否为空的自定义函数分享
2015/01/31 Javascript
jQuery实现鼠标单击网页文字后在文本框显示的方法
2015/05/06 Javascript
js如何实现点击标签文字,文字在文本框出现
2015/08/05 Javascript
通过XMLHttpRequest和jQuery实现ajax的几种方式
2015/08/28 Javascript
省市二级联动小案例讲解
2016/07/24 Javascript
jQuery简单实现title提示效果示例
2016/08/01 Javascript
jQueryUI Datepicker组件设置日期高亮
2016/10/13 Javascript
JavaScript中创建对象的7种模式详解
2017/02/21 Javascript
Vue.js事件处理器与表单控件绑定详解
2017/03/20 Javascript
JS 判断某变量是否为某数组中的一个值的3种方法(总结)
2017/07/10 Javascript
JS如何实现在页面上快速定位(锚点跳转问题)
2017/08/14 Javascript
基于vue2.0的活动倒计时组件countdown(附源码下载)
2018/10/09 Javascript
Angular ui-roter 和AngularJS 通过 ocLazyLoad 实现动态(懒)加载模块和依赖
2018/11/25 Javascript
移动端如何用下拉刷新的方式实现上拉加载
2018/12/10 Javascript
nuxt.js写项目时增加错误提示页面操作
2020/11/05 Javascript
vue-axios同时请求多个接口 等所有接口全部加载完成再处理操作
2020/11/09 Javascript
Python 文件操作实现代码
2009/10/07 Python
django轻松使用富文本编辑器CKEditor的方法
2017/03/30 Python
Python删除Java源文件中全部注释的实现方法
2017/08/30 Python
Python多进程池 multiprocessing Pool用法示例
2018/09/07 Python
python 移动图片到另外一个文件夹的实例
2019/01/10 Python
Python Pillow Image Invert
2019/01/22 Python
处理Selenium3+python3定位鼠标悬停才显示的元素
2019/07/31 Python
耐克奥地利官网:Nike奥地利
2019/08/16 全球购物
物流仓管员岗位职责
2013/12/04 职场文书
2014学校庆三八妇女节活动总结
2014/03/01 职场文书
大学生自我评价范文
2015/03/03 职场文书
幼儿园食品安全责任书
2015/05/08 职场文书
一小时迅速入门Mybatis之bind与多数据源支持 Java API
2021/09/15 Javascript
SpringBoot系列之MongoDB Aggregations用法详解
2022/02/12 MongoDB