jquery:错误$(“div#created”)。scrollintoview不是一个函数

时间:2011-12-16 22:44:44

标签: jquery html css ruby-on-rails-3

编辑:新错误:错误Jquery未定义行:208

此代码中的第208行:https://github.com/litera/jquery-scrollintoview/blob/master/jquery.scrollintoview.js

enter image description here

我不确定为什么我会收到此错误,因为我在jsfiddle中正常工作,但是当我将代码添加到我的rails应用程序时它不会工作。当我点击错误以了解更多信息时,complete: function() {部分会突出显示。

单击该链接会导致显示隐藏的div并且链接变为“活动”(颜色:红色),但是,窗口不会滚动到div的底部,而当我单击链接以切换所有内容时发生(div不关闭,链接保持红色)。

原始的jsfiddle:事情有效:http://jsfiddle.net/Gr7BP/

的application.js

$(function() {

    $("#created").hide();

    $('a.created-button').click(function() {

        $('#created').toggle(function() {
            $('a.created-button').toggleClass('active');
            $('#created').scrollintoview({
                duration: "slow",
                direction: "y", 
                complete: function() {
                        // highlight the element so user's focus gets where it needs to be
                }
            });
        });
    });
});

$(function() {

    $("#stuff").hide();

    $('a.stuff-button').click(function() {

        $('#stuff').toggle(function() {
            $('a.stuff-button').toggleClass('active');
            $('#stuff').scrollintoview({
                duration: "slow",
                direction: "y",
                complete: function() {
                        // highlight the element so user's focus gets where it needs to be
                }
            });
        });
    });
});

页脚

<footer>
 <div id="created-by"><a class="created-button">Created by</a></div> 
 <div id="cool-stuff"><a class="stuff-button">Cool stuff</a></div>

</footer>
<div id="created">

</div>
<div id="stuff">

</div>

CSS

#created {
    margin: 0 auto;
    width: 100%;
    height: 150px;
    background: green;

}
#stuff {
    margin: 0 auto;
    width: 100%;
    height: 150px;
    background: white;

}

.active {
    color: red;
}

编辑:shows error with non camel casing

2 个答案:

答案 0 :(得分:1)

这是因为您调用的函数是scrollIntoView()(在camelCasing中 ),而定义的函数是scrollintoview()不在camelCasing中

注意:JavaScript是区分大小写的语言。

确保以正确的顺序包含JavaScript文件。首先,加载jQuery库,然后加载scrollintoview插件,最后加载application.js

编辑:根据评论中的讨论更新了答案。

答案 1 :(得分:0)

回调函数可能会起作用。

 $('div#created').scrollintoview({
      duration: "slow",
      direction: "y"
 }, function() {
      // do something   
 });