原生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实现键盘操作实现div的移动或改变的原理及代码
Jun 23 Javascript
举例详解AngularJS中ngShow和ngHide的使用方法
Jun 19 Javascript
为JQuery EasyUI 表单组件增加焦点切换功能的方法
Apr 13 jQuery
react-router实现按需加载
May 09 Javascript
原生js实现简单的模态框示例
Sep 08 Javascript
vue中手机号,邮箱正则验证以及60s发送验证码的实例
Mar 16 Javascript
详解Vue.js中.native修饰符
Apr 24 Javascript
jQuery实现为动态添加的元素绑定事件实例分析
Sep 07 jQuery
Layui Table js 模拟选中checkbox的例子
Sep 03 Javascript
JavaScript函数IIFE使用详解
Oct 21 Javascript
vue.config.js中配置Vue的路径别名的方法
Feb 11 Javascript
Layer UI表格列日期格式化及取消自动填充日期的实现方法
May 10 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 根据IP地址控制访问的代码
2010/04/22 PHP
php跨域cookie共享使用方法
2014/02/20 PHP
PHP让网站移动访问更加友好方法
2019/02/14 PHP
ThinkPHP6.0如何利用自定义验证规则规范的实现登陆
2020/12/16 PHP
修改jquery里的dialog对话框插件为框架页(iframe) 的方法
2010/09/14 Javascript
什么是DOM(Document Object Model)文档对象模型
2012/03/05 Javascript
JavaScript加强之自定义callback示例
2013/09/21 Javascript
jquery实现美观的导航菜单鼠标提示特效代码
2015/09/06 Javascript
javascript字符串函数汇总
2015/12/06 Javascript
基于JavaScript代码实现自动生成表格
2016/06/15 Javascript
Java中int与integer的区别(基本数据类型与引用数据类型)
2017/02/19 Javascript
浅谈jquery拼接字符串效率比较高的方法
2017/02/22 Javascript
JS实现动态添加DOM节点和事件的方法示例
2017/04/28 Javascript
nodejs处理图片的中间件node-images详解
2017/05/08 NodeJs
微信小程序实现action-sheet弹出底部菜单功能【附源码下载】
2017/12/09 Javascript
Vue 子组件与数据传递问题及注意事项
2019/07/11 Javascript
layui自定义插件citySelect实现省市区三级联动选择
2019/07/26 Javascript
详解webpack打包vue项目之后生成的dist文件该怎么启动运行
2019/09/06 Javascript
js基础之事件捕获与冒泡原理
2019/10/09 Javascript
js实现旋转的星空效果
2019/11/01 Javascript
使用python 3实现发送邮件功能
2018/06/15 Python
Python读取mat文件,并保存为pickle格式的方法
2018/10/23 Python
更新修改后的Python模块方法
2019/03/03 Python
python plotly画柱状图代码实例
2019/12/13 Python
基于python修改srt字幕的时间轴
2020/02/03 Python
使用pandas读取表格数据并进行单行数据拼接的详细教程
2021/03/03 Python
HTML5之SVG 2D入门11—用户交互性(动画)介绍及应用
2013/01/30 HTML / CSS
适合各种场合的美食礼品:Harry & David
2016/08/03 全球购物
加拿大最大的箱包及旅游配件零售商:Bentley Leathers
2017/07/19 全球购物
贪睡宠物用品:Snoozer Pet Products
2020/02/04 全球购物
师范教师大学生职业生涯规划范文
2014/01/05 职场文书
拓展策划方案
2014/06/03 职场文书
电子商务专业求职信
2014/07/10 职场文书
防卫过当辩护词
2015/05/21 职场文书
大学生暑期实践报告
2015/07/13 职场文书
MySQL 逻辑备份 into outfile
2022/05/15 MySQL