Question

EDIT: new error: Error Jquery not defined line: 208

Line 208 in this code: https://github.com/litera/jquery-scrollintoview/blob/master/jquery.scrollintoview.js

I’m not sure why I’m getting this error because I got everything working right in a jsfiddle, but when I added the code to my rails app it wont work. When I click on the error to learn more the section complete: function() { is highlighted.

Clicking the link causes the hidden div to appear and the link to become ‘active’ (color: red), however, the window does not scroll to the bottom of the div, and when I click the link to toggle everything nothing happens (div doesn’t close and link stays red).

Original jsfiddle where things work : 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

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

edit:

Answer 1

It is because the function you are calling is scrollIntoView() (in camelCasing) while the function defined is scrollintoview() (not in camelCasing)

Note : JavaScript is a case sensitive language.

Make sure you have included the JavaScript files in the correct order. First, load the jQuery library, then the scrollintoview plugin and finally your application.js

EDIT: Updated the answer as per the discussion in comments.