jQuery 平滑滚动

Question

我有点为难。我一直在寻找一种在 div 中平滑滚动的方法，并找到了这个 fiddle:

<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 站点上运行良好，但当我完全相同地复制它时，没有任何更改，它会因某种原因停止工作。

我已经对所有外部脚本进行了三重检查，但还是找不到问题所在。

这是完全相同的代码，直接从 fiddle 复制，但它不起作用。

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

如果有人能指出正确的方向，我将不胜感激。

Answer 1

您在代码中引用了 DOM 个元素，但它们尚未准备就绪。将所有 <script> 标签放在关闭 </body> 标签之前。

Answer 2

fiddle中的JavaScript配置为在DOM就绪时执行。您站点 (scroll.js) 中的 JavaScript 在 DOM 元素存在之前被插入并在文档的头部执行，因此没有发生任何绑定。

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

如果你不能将link移动到scroll.js，你可以使用jQuery在scroll.js中的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 事件中运行（请查看 fiddle[=17= 中 jQuery 版本下的下拉列表]).

将所有代码封装在里面

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

jQuery 平滑滚动

jQuery smooth scroll

javascript

jquery

scroll

smooth