JQuery: ошибка $ ("Div # создан"). scrollintoview не является функцией

Question

РЕДАКТИРОВАТЬ: новая ошибка: Ошибка Jquery не определена строка: 208

Строка 208 в этом коде: https://github.com/litera/jquery-scrollintoview/blob/master/jquery.scrollintoview.js

Я не уверен, почему я получаю эту ошибку, потому что у меня все работает правильно в 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;
}

редактировать:

Answer 1

Это потому, что вызываемая функция scrollIntoView() ( в camelCasing ), в то время как определенная функция scrollintoview() ( не в camelCasing )

Примечание. JavaScript является регистрозависимым языком .

Убедитесь, что файлы JavaScript включены в правильном порядке.Сначала загрузите библиотеку jQuery, затем плагин scrollintoview и, наконец, application.js

РЕДАКТИРОВАТЬ: обновил ответ в соответствии с обсуждением в комментариях.

Answer 2

Функция обратного вызова, вероятно, добьется цели.

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