jQuery平滑滚动

Question

我有点困惑。我一直在寻找一种方式来通过div的平滑滚动，发现这个小提琴：

http://jsfiddle.net/Vk7gB/187/

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> 
<script type="text/javascript" src="http://trevordavis.net/play/jquery-one-page-nav/jquery.scrollTo.js"></script> 
<script type="text/javascript" src="http://trevordavis.net/play/jquery-one-page-nav/jquery.nav.min.js"></script> 
<script type="text/javascript" src="http://mottie.github.io/Keyboard/js/jquery.mousewheel.js"></script> 
<script type="text/javascript" src="scroll.js"></script> 

的问题是，虽然它完美的作品上的jsfiddle现场，当我完全复制同样，没有任何更改，由于某种原因停止工作。

我已经三重检查了所有的外部脚本，但我找不出什么问题。

下面是完全相同的代码，直接从小提琴中复制，它不起作用。

http://www.zero-blade.com/work/test2/

如果任何人都可以在正确的方向指向我，我将不胜感激。

Answer 1

因为在的jsfiddle，该代码DOMReady事件（看在小提琴下拉jQuery的版本下）中运行。

总结所有的代码里面

$(function(){ 
    // you code here 
}); 

Answer 2

您可以在您的代码中引用DOM元素，但它们还没有准备好。在关闭</body>标记之前，放置所有<script>标记。

Answer 3

小提琴中的JavaScript配置为在DOM准备就绪时执行。您的站点中的JavaScript（scroll.js）正在您的文档的HEAD中插入并执行，在DOM元素存在之前，因此不会发生绑定。

所有的JavaScript应该位于主体的末尾，将scroll.js移动到主体的末尾将解决问题。

如果你不能移动的链接scroll.js，你可以使用jQuery在scroll.js的document.ready（）来触发绑定之后发生DOM准备就绪，具体如下：

scroll.js

var $current, flag = false; 

$(function() { 
    // This code will be executed when the DOM is ready. 
    // This is a short version of $(document).ready(){...} 

    $('#nav').onePageNav(); 

    $('body').mousewheel(function(event, delta) { 
     if (flag) { return false; } 
     $current = $('div.current'); 

     if (delta > 0) { 
      $prev = $current.prev(); 

      if ($prev.length) { 
       flag = true; 
       $('body').scrollTo($prev, 1000, { 
        onAfter : function(){ 
         flag = false; 
        } 
       }); 
       $current.removeClass('current'); 
       $prev.addClass('current'); 
      } 
     } else { 
      $next = $current.next(); 

      if ($next.length) { 
       flag = true; 
       $('body').scrollTo($next, 1000, { 
        onAfter : function(){ 
         flag = false; 
        } 
       }); 
       $current.removeClass('current'); 
       $next.addClass('current'); 
      } 
     } 

     event.preventDefault(); 
    }); 

});