javascript - 网页实现平滑滚动效果

Question

如题 我希望可以实现网页的一个平滑滚动的效果
例如这个网站http://tnc.org.cn/ 我不需要实现网页上的其他效果
只需要在鼠标滚动的时候 在windows下面不会随着鼠标滚轮一卡一卡的卷动
不知道 哪位大神有办法实现 或者有jquery的插件

Answer 1

从http://tnc.org.cn/ 的plugin.js里面找到了这段代码，可以实现有惯性的页面滚动。

//mousewheel
;(function($){var _=["DOMMouseScroll","mousewheel"];if($.event.fixHooks)for(var B=_.length;B;)$.event.fixHooks[_[--B]]=$.event.mouseHooks;$.event.special.mousewheel={setup:function(){if(this.addEventListener){for(var $=_.length;$;)this.addEventListener(_[--$],A,false)}else this.onmousewheel=A},teardown:function(){if(this.removeEventListener){for(var $=_.length;$;)this.removeEventListener(_[--$],A,false)}else this.onmousewheel=null}};$.fn.extend({mousewheel:function($){return $?this.bind("mousewheel",$):this.trigger("mousewheel")},unmousewheel:function($){return this.unbind("mousewheel",$)}});function A(B){var _=B||window.event,A=[].slice.call(arguments,1),D=0,C=true,E=0,F=0;B=$.event.fix(_);B.type="mousewheel";if(_.wheelDelta)D=_.wheelDelta/120;if(_.detail)D=-_.detail/3;F=D;if(_.axis!==undefined&&_.axis===_.HORIZONTAL_AXIS){F=0;E=-1*D}if(_.wheelDeltaY!==undefined)F=_.wheelDeltaY/120;if(_.wheelDeltaX!==undefined)E=-1*_.wheelDeltaX/120;A.unshift(B,D,E,F);return($.event.dispatch||$.event.handle).apply(this,A)}})(jQuery);

Answer 2

fullPage.js
Demo: http://alvarotrigo.com/fullPage/#firstPage

Answer 3

监听滚轮事件 然后滚动到一定距离 用jquery animate 实现平滑效果或者直接用css3 然后屏蔽原生滚动处理

Answer 4

https://github.com/inuyaksa/jquery.nicescroll
用这个jquery插件就好。。。。刚刚发现的