Jquery Scroll Top无响应

Question

我有一个名为span#about的范围，当我点击它时，我想向下滚动页面到名为div#perthImage的div的顶部

当我点击跨度时，它会显示“滚动启动”，因此我知道点击正在注册，但它不会滚动。有人可以帮助我。

$(document).ready(function () {
    $("span#about").click(function () {
      console.log('scroll initiate')
        $('html,body').animate({ scrollTop: $('div#perthImage').offset().top }, 200);
    });
});

我的HTML代码：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.js"></script>
<link rel="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<div id='nav' class="nav"> 
    <div class='row'>
        <div class = 'col-xs-12' id = 'aboutBtn'>
            <span id = 'about'>About Us</span>
        </div>
        <div class = 'col-xs-12' id = 'citiesBtn'>
            <span id = 'cities'>Cities <i class="fa fa-angle-down" aria-hidden="true"></i></span>
            <div id = 'oncityhover'>
                <div class = 'row' id = 'citiesDropdown'>
                    <div class = 'menuItem col-xs-12' id = 'perthScroll'>
                        Perth City
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div id = 'homeLogo'>
    <center>
        <img id='logo' src="images/CulturedLogo.png">
        </div>
        <br><br><br><br><br><br><br><br><br><br><br><br><br><br>
        <br><br><br><br><br><br><br><br><br><br><br>

        <div class = 'cities row'>
            <div class = 'locImage col-md-6' id = 'perthImage' title = 'Perth City' alt = 'Perth City'>
                <center>
                    <h4 id = 'perth'>Perth City</h4>
                </center>
            </div>
        </div>