原生射流研究…实现淘宝首页点击按钮缓慢回到顶部效果

淘宝首页的回到顶部按钮是这样的：下拉到一定距离后按钮才显示出来，鼠标放到按钮上时，按钮背景会变成灰色，并且图标变成了文字。点击按钮缓慢回到顶部我们先分析下实现这样的效果需要添加哪些事件。鼠标移进移出按钮，按钮表现发生变化，所以需要给按钮添加鼠标悬停，鼠标移出事件。要侦听滚动条的变化，所以需要给窗户添加卷起事件，点击按钮回到顶部，按钮添加点击事件。我们将事件处理程序封装成三个函数移动，移动，移动下面先给出html/css代码复制代码代码如下： div class=' container ' div class=' header '头部/div div class='content '主要内容，高度是2000 px/div class='页脚底部/div div id='btn '返回顶部/div /div复制代码代码如下：容器{ width : 980 pxmargin : 0 autoheight : auto背景技术# aaa}。内容{ height : 2000 pxborder : 1 px纯蓝；} # BTN { position : fixedbottom : 50pxright : 0；宽度： 54px高度： 55px背景： URL(图标。png)不重复0-110像素；} //背景图可随意找一张font-size : 12px线高： 55px文本对齐：中心；文本缩进：-9999 em；光标：指针；显示器：无；下面是完整的射流研究…代码复制代码代码如下：窗口。addeventlistener(' load '，function(){ var BTN=document。getelementbyid(' BTN ')；BTN。addeventlistener('鼠标悬停'，moveIn，false)；btn.addEventListener('mouseout '，moveOut，false)；函数BTN。风格。color=' # ffffff//修改的是内联样式，具有最高的优先级；BTN。风格。文本缩进=' 0emBTN。风格。背景图像=“无”；BTN。风格。背景颜色=' # FF4401}函数moveOut(){ BTN。风格。text indent='-9999 em '；BTN。风格。背景图像=' URL(图标。png)'；}函数goTop(加速度，时间){ //修改参数可调整返回顶部的速度加速度=加速度| | 0.1;时间=时间| | 10;变化速度=1加速度；函数getScrollTop() { //取得滚动条的竖直距离返回文件。文档元素。向上滚动| |文档。尸体。滚动顶部；}函数setScrollTop(值){ //设置滚动条的竖直距离，实现效果的关键就是在很短的间隔时间内不断地修改滚动条的竖直距离，以实现滚动效果文件。文档元素。滚动顶部=值；文件。尸体。滚动顶部=值；}窗口。onscroll=function(){ var scroll top=getscroll top()；if (scrollTop 100) { //判断滚动条距离窗口顶部多远时显示出来，这里是100像素BTN。风格。display=' block} else { BTN。风格。display=" none} };BTN。onclick=function(){ var timer=setInterval(function(){ setscroll top(数学。floor(get scroll top()/speed))；//这行代码是关键，取得滚动条竖直距离，除以速度后再给滚动条设置竖直距离if(getScrollTop()==0)clearInterval(计时器);},时间);};} goTop(0.2，8)；}，false)；当然，还有其他的实现方法，下面给出其他方法的关键代码复制代码代码如下：号。onclick=function(){ clearInterval(计时器);var timer=setInterval(function(){ var now=scroll top；//滚动条竖直距离速度=(0 -现在)/10;速度=数学地板（速度);if(now==0)；clearInterval(计时器);文件。文档元素。滚动顶部=现在速度；//标准模式下的浏览器文件。尸体。滚动顶部=现在速度；//怪异模式下的浏览器}, 15);}

这里的代码主要参考了其他在线资源，增加了一点理解。当然，还有其他的实现方法，比如window.scrollTo()，最早的时候是由JavaScript支持的。如果用jQ实现，代码量会变得非常小。参见w3cplus。个人认为先学习原生JavaScript会容易很多，比如数据类型、闭包、继承、作用域、DOM、CSS、事件处理、Ajax等。熟练后再学习其他框架。