Question

我有点受约束。我一直在寻找一种方法来顺畅地滚动div并发现这个小提琴：

<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，你可以在scroll.js中使用jQuery的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();
    });

});

Answer 3

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

将所有代码包装在

中

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

jQuery顺畅滚动

3 个答案: