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