在这个世界上，有些人解决的是大问题，有些本文版权归作者所有，未经授权不得转载。【原创内容，转载请注明出处】人解决的是小问题，而TweenLite解未经授权，禁止复制转载。本文版权归作者所有，未经授权不得转载。决的就是一个小到不能再小的问题——缓动（【关注微信公众号：wwwtangshuangnet】【本文受版权保护】Tween）。所谓缓动，是指在两种状态之【原创内容，转载请注明出处】【本文受版权保护】间进行平滑的转换，包括缩小、放大、旋转和【本文首发于唐霜的博客】【关注微信公众号：wwwtangshuangnet】渐变等几种操作。无论是在web编程中，还【关注微信公众号：wwwtangshuangnet】【未经授权禁止转载】是Android或iOS中，Tween一原创内容，盗版必究。本文版权归作者所有，未经授权不得转载。直有人去实践，有UI的地方，就有Twee【版权所有】唐霜 www.tangshuang.net未经授权，禁止复制转载。n。

本文的主题是要实现页面的平滑滚动，为何要本文版权归作者所有，未经授权不得转载。原创内容，盗版必究。在文章开头大肆讨论Tween呢？如果从无【关注微信公众号：wwwtangshuangnet】转载请注明出处：www.tangshuang.net插件实现的角度，确实没有半毛钱关系，但是【版权所有】唐霜 www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】其实现的机理背后，就是Tween原理。

好了，回到主题吧。在浏览器的默认状态下，【版权所有，侵权必究】本文作者：唐霜，转载请注明出处。如果不开启浏览器的平滑滚动，浏览器的滚动本文版权归作者所有，未经授权不得转载。【访问 www.tangshuang.net 获取更多精彩内容】条在鼠标滚轮滚动时，是一顿一顿的，根据鼠本文作者：唐霜，转载请注明出处。【未经授权禁止转载】标滚轮的不同，每一顿滑动的具体是不一样的【原创不易，请尊重版权】本文版权归作者所有，未经授权不得转载。，仔细观察就会发现，鼠标滚轮滚动一个刻度本文版权归作者所有，未经授权不得转载。著作权归作者所有，禁止商业用途转载。，浏览器滚动条直接跳到对应的高度，中间没【版权所有】唐霜 www.tangshuang.net【原创内容，转载请注明出处】有任何过渡效果。Firefox在开启平滑转载请注明出处：www.tangshuang.net原创内容，盗版必究。滚动的时候，这种现象将会消失，滚轮滚动一本文作者：唐霜，转载请注明出处。本文版权归作者所有，未经授权不得转载。个刻度时，滚动条平滑的滚到对应的位置，但【访问 www.tangshuang.net 获取更多精彩内容】【原创不易，请尊重版权】是Firefox需要借助硬件支持这一功能【版权所有】唐霜 www.tangshuang.net【转载请注明来源】。

对于一般网页，这种一顿一顿的现象并没有太【原创不易，请尊重版权】转载请注明出处：www.tangshuang.net大的影响。但是当网站需要借助滚到来实现某【原创不易，请尊重版权】【版权所有，侵权必究】些效果的时候，例如视差滚动的时候，就会发【转载请注明来源】著作权归作者所有，禁止商业用途转载。现这种体验糟糕透了。而且如果页面平滑滚动【作者：唐霜】本文作者：唐霜，转载请注明出处。，也会让人阅读更加舒服，不会有跳动的感觉【本文受版权保护】未经授权，禁止复制转载。。本文就用jQuery来实现这一效果。

前面提到的TweenLite是一个插件，【未经授权禁止转载】【本文首发于唐霜的博客】可以从这里原创内容，盗版必究。了解和获取。通过TweenLite实现的【本文受版权保护】未经授权，禁止复制转载。缓动效果，不单单是滚动条的缓动这么简单，转载请注明出处：www.tangshuang.net【版权所有】唐霜 www.tangshuang.net你可以自己看它的一些案例。

但是在没有插件的情况下，如何来做到平滑效著作权归作者所有，禁止商业用途转载。本文版权归作者所有，未经授权不得转载。果呢？我们简单的分析一下。

首先，我们需要监听鼠标滚轮事件，鼠标滚轮【访问 www.tangshuang.net 获取更多精彩内容】【关注微信公众号：wwwtangshuangnet】滚动的时候，我们需要截获滚轮实际要滚动的【关注微信公众号：wwwtangshuangnet】【转载请注明来源】距离，同时拦截滚轮事件，不允许机器默认的【原创不易，请尊重版权】【版权所有】唐霜 www.tangshuang.net滚动动作，接着再用我们自己的代码实现对等【作者：唐霜】【关注微信公众号：wwwtangshuangnet】距离的滑动，从而实现滑动的平滑。

具体代码如下：【作者：唐霜】

var $window = jQuery(window); //Window object
var scrollTime = 400; //Scroll time
var scrollDistance = 300; //Distance. Use smaller value for shorter scroll and greater value for longer scroll
var mobile_ie = -1 !== navigator.userAgent.indexOf("IEMobile");

function smoothScrollListener(event) {
  event.preventDefault();
  var delta = event.wheelDelta / 120 || -event.detail / 3;
  var scrollTop = $window.scrollTop();
  var finalScroll = scrollTop - parseInt(delta * scrollDistance);
  $('html,body').stop().animate({scrollTop: finalScroll},scrollTime);
}

if (!jQuery('html').hasClass('touch') && !mobile_ie) {
  if (window.addEventListener) {
    window.addEventListener('mousewheel', smoothScrollListener, false);
    window.addEventListener('DOMMouseScroll', smoothScrollListener, false);
  }
}

首先，我们来看下上面的代码。先声明了三个【原创内容，转载请注明出处】【未经授权禁止转载】变量，分别存储window对象，每次滚动【关注微信公众号：wwwtangshuangnet】【本文受版权保护】滚轮一个刻度要多少时间，第三个变量定义每【原创不易，请尊重版权】本文版权归作者所有，未经授权不得转载。一个滚轮刻度滑动多长的距离。

其次，对滚轮事件进行监听。代码在末尾，使【原创不易，请尊重版权】【版权所有】唐霜 www.tangshuang.net用addEventListener监听滚【原创不易，请尊重版权】【本文受版权保护】轮事件，当事件发生时，调用smoothS【关注微信公众号：wwwtangshuangnet】转载请注明出处：www.tangshuang.netcrollListener函数。

最后，实现平滑滚动。当监听到滚轮事件后，【未经授权禁止转载】【本文受版权保护】首先用preventDefault()阻【未经授权禁止转载】【版权所有】唐霜 www.tangshuang.net止默认响应，浏览器本身的滚动被阻止，在这本文版权归作者所有，未经授权不得转载。【版权所有】唐霜 www.tangshuang.net种情况下，即使你滚动滚轮，浏览器也不会滚【本文受版权保护】【原创不易，请尊重版权】动。接下来是计算，通过当前的滚动条位置，本文作者：唐霜，转载请注明出处。【版权所有】唐霜 www.tangshuang.net减去滚动刻度和刻度距离的计算值（有正负，【原创内容，转载请注明出处】本文作者：唐霜，转载请注明出处。正负即滚动的方向），得到应该滚动多少距离【本文首发于唐霜的博客】著作权归作者所有，禁止商业用途转载。。最后，使用jQuery的animate【版权所有】唐霜 www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】实现这个距离的平滑滚动效果。

代码简单，但却需要经过长时间的思考才能获本文作者：唐霜，转载请注明出处。本文版权归作者所有，未经授权不得转载。得，只有经常尝试，方能获得这些灵感。

2015-12-22 6770 jquery