jQuery smooth scroll

Question

Я немного привязан. Я искал способ прокрутки плавно через диву и нашел эту скрипку:

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 в скрипке).

Wrap весь код внутри

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

Answer 2

Вы ссылаетесь на свой код на элементы DOM, но они еще не готовы. Поместите все свои теги <script> перед закрытием </body> тег.

Answer 3

JavaScript в скрипте сконфигурирован для выполнения, когда DOM готов. JavaScript на вашем сайте (scroll.js) вставлен и исполняется в HEAD вашего документа до того, как существуют элементы DOM, поэтому никаких привязок не происходит.

Весь ваш JavaScript должен находиться в конце тела, а перемещение scroll.js до конца тела решит проблему.

Если вы не можете переместить ссылку на scroll.js, вы можете использовать document.ready JQuery (в) в scroll.js для запуска вязки происходят после 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(); 
    }); 

});