Problems smooth scrolling to particular div

Question

In my dropdown menu, I have 2 links, which when clicked on are supposed to take (smooth scroll either up or down - depending on which part of the page the user's on) the user to the corresponding section on the page.

The only problem: nothing works.

HTML:

        <div class="navbar navbar-inverse navbar-fixed-top">
            <div class="container">

                <div class="collapse navbar-collapse navHeaderCollapse">

                    <ul class="nav navbar-nav navbar-right">

                        <li class = "dropdown active">  
                            <a href = "#" class = "dropdown-toggle" data-toggle = "dropdown"><span>Dropdown</span><b class = "caret"></b></a>
                            <ul class = "dropdown-menu">
                                <li><a href = "#subtab1">Subtab1</a></li>
                                <li><a href = "#subtab2">Subtab2</a></li>
                            </ul><!-- END: "dropdown-menu" -->      
                        </li><!-- END: "dropdown" -->

                    </ul><!-- END: "collapse navbar-collapse navHeaderCollapse" -->
                </div><!-- END: "container" -->
            </div><!-- END: "container" -->
        </div><!-- END: "navbar navbar-inverse navbar-fixed-top" -->

        <div class="container pad-container">

            <div id = "subtab1">

                <h1>Subtab1</h1>
                <p>stuff...</p>
                <p>lorem lorem</p>
                <p>lorem lorem</p>
                <p>lorem lorem</p>
                 <p>lorem lorem</p>
            </div>

            <div id = "subtab2">

                <h1>Subtab2</h1>
                <p>lorem lorem</p>
                <p>lorem lorem</p>
                <p>lorem lorem</p>
                <p>lorem lorem</p>
            </div>
        </div>

CSS:

.pad-container{
  padding-top:80px;
  padding-bottom:80px; /*height of the footer plus a little */
}

JS:

$( ".dropdown-menu > li > a" ).click(function() {
    $('html,body').animate({ scrollTop: $($(this).attr("href")).offset().top -  navHeight }, 750);
});

Answer 1

$( ".dropdown-menu > li > a" ).click(function (event) {
    event.preventDefault();
    $('html,body').animate({ scrollTop: $($(this).attr("href")).offset().top}, 750);
});

you might also want to try doing $(document).animate( ... ) or limit to html or body to test. I removed the navHeight var for now.