问题与jquery平滑滚动间谍无法在移动视图中工作

Question

我在网站上有菜单栏，这是一个单页网站。当用户点击memu时，通过jquery激活scrollspy事件。直到这里它运作良好，但当我切换到移动视图时，它们不是平滑的滚动效果。

我已经使用CUSTOM CSS写了

这是HTML CODE

 <div class="col-md-9 col-sm-9 nav-wrapper" id="myNavbar">

                        <!-- Nav Start -->
                        <nav class="navbar1">
                            <ul class="sf-menu" id="menu">
                                <li><a href="#home">Home</a></li>
                                <li><a href="#aboutus">About Us</a></li>
                                <li><a href="#practise_area">Practice Areas</a></li>
                                <li><a href="#clients">Clients</a></li>                                 
                                <li><a href="#team">Team</a></li>                                   
                                <li><a href="#career">Careers</a></li>                                  
                                <li><a href="#contact">Contact</a></li>

                            </ul>
                        </nav>
                        <!-- Nav End -->

                    </div>

这是Jquery脚本

<script>
$('body').scrollspy({target: ".navbar1", offset: 50});

        $("#myNavbar a").on('click', function(event){
            if(this.hash != ""){
                event.preventDefault();
            }

            //store hash
            var hash =  this.hash;

            $('html, body').animate({
                scrollTop: $(hash).offset().top
            }, 500, function(){
                window.location.hash = hash;
            });
        });
    });
</script>

这是CSS代码

CSS代码非常长，所以我已经在这里过滤了

    header .nav-wrapper {
        float: right;
    }
    header .nav-wrapper ul {
        float: right;
    }

    .sf-menu .menu-description {
        display: none;
    }

    sf-menu li a {
        padding: 10px 18px;
    }

    .sf-menu li li a {
        padding-top: 3px;
        padding-bottom: 3px;
    }

    .sf-menu > li {
        margin-top: 10px;
    }

    .sf-menu > li {
        margin-top: 0;
        height: 60px;
        line-height: 40px;
    }

    .sf-menu {
        margin-bottom: 0;
    }
    .sf-menu ul {
        box-shadow: none;
        border-top: 0;
    }
    .sf-menu a {
        padding-top: 0;
        padding-bottom: 0;
        font-weight: normal;
    }
    .sf-menu li {
        text-transform: none;
        background: none;
    }

这是桌面视图

这是移动视图

感谢提前