SmoothScroll не работает

.navbar{
    background-color: #fff;
}

.navbar .navbar-toggle{
    font-weight: bold;
    border-color: #ddd;
}

.navbar-title p{
    color: #d1d1d1;
    font-size: 26px;
    float: left;
    margin-top: 13px;
    margin-left: 40px
}

.navbar-collapse ul{
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    color: #2a4982;
}

.navbar-collapse li{
    float: left;
    margin-top: 5px;
    padding-left: 100px;
}

.navbar-collapse li a{
    color: #2a4982;
    display: block;
    padding: 14px 16px;
    text-decoration: none;
    text-align: center;
}

.navbar-collapse li a:hover{
    transition: 0.6s;
    color: #b7b7b7;
}

        <div class = "navbar" role = "navigation">
            <div class = "navbar-title">
                <a href = "#"><p>FIR</p></a>
            </div>
            <div class = "collapse collapsing navbar-collapse">
                <ul>
                    <li><a href = "#" class = "smoothScroll">Home</a></li>
                    <li><a href = "#" class = "smoothScroll">ATC</a></li>
                    <li><a href = "#" class = "smoothScroll">Pilots</a></li>
                    <li><a href = "#" class = "smoothScroll">Special Operations</a></li>
                    <li><a href = "#" class = "smoothScroll">Contact Us</a></li>
                </ul>
            </div>
        </div>
        
        <!-- scripts -->
        <script type = "text/javascript" src = "http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
        <script type = "text/javascript" src = "scripts/smoothscroll.js"></script>