jQuery平滑滚动

Question

I'm in a bit of a bind. I've been searching for a way to scroll smoothly through divs and found this fiddle:

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>

The problem is that, while it works perfectly on the jsfiddle site, when i copy it exactly the same, without any changes, it stops working for some reason.

I've triple checked all external scripts and yet I can't find out what is the problem.

Here's the exact same code, copied directly from the fiddle and it does not work.

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

If anyone can point me in the right direction, I would greatly appreciate it.

Answer 1

You refer in your code to DOM elements, but they are not ready yet. Put all your <script> tags just before closing </body> tag.

Answer 2

The JavaScript in the fiddle is configured to execute when the DOM is ready. The JavaScript in your site (scroll.js) is being inserted and executed in the HEAD of your document, before the DOM elements exist, so no bindings are occurring.

All of your JavaScript should be at the end of the body, and moving scroll.js to the end of the body will solve the issue.

If you can't move the link to scroll.js, you can use jQuery's document.ready() in scroll.js to trigger the bindings to occur AFTER the DOM is ready, as follows:

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();
    });

});

Answer 3

Because in jsFiddle, the code runs inside the DOMReady event ( look at the drop down under the jQuery version in the fiddle ).

Wrap all your code inside

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