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

您在代码中引用了DOM元素，但尚未准备好。 将所有<script>标记放在</body>标记之前。

Answer 2

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

您所有的JavaScript都应放在正文的末尾，将scroll.js移到正文的末尾将解决此问题。

如果无法将链接移动到scroll.js，则可以在DOM准备就绪后使用Scroll.js中的jQuery的document.ready（）触发绑定，如下所示：

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

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

将所有代码包装在内

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