Jquery 引导3平滑滚动向上滚动，然后跳转到所选内容

我试着将平滑滚动放入我的引导程序3中。它平滑地滚动，但总是滚动到顶部，然后跳转到给定的静默标记部分。有人能帮我解决这个问题吗

jQuery：

$(".mylink").on('click', function(e) {
   e.preventDefault();
    var to = $(this).attr('href');
    $('.scrollspydiv').animate({
        scrollTop: $(to).offset().top },3000,
        function(){
            window.location.hash = to;
        })

});

安静链接：

<ul id="collapseTwo" class="list-group panel-collapse collapse in">
    <li class="list-group-item"><a class="mylink" href='#register'>register</a></li>
    <li class="list-group-item"><a class="mylink" href='#cancel'>cancel</a></li>
    <li class="list-group-item"><a class="mylink" href='#find'>find</a></li>
    <li class="list-group-item"><a class="mylink" href='#location'>location</a></li>
    <li class="list-group-item"><a class="mylink" href='#kids'>kids</a></li>
    <li class="list-group-item"><a class="mylink" href='#teen'>teen</a></li>
    <li class="list-group-item"><a class="mylink" href='#question'>question</a></li>
</ul> 

---

发生此问题的原因是div元素中的可滚动项。所以会有一些计算涉及，进一步的细节将在下面的url

<div data-spy="scroll" data-target="#navlist"  data-offset="50" class="scrollspydiv" >
    <h3 id="register">register</h3>
    <p>content</p>
    <h3 id="cancel">cancel</h3>
    <p>content</p>
    <h3 id="find">find</h3>
    <p>content</p>
    <h3 id="location">location</h3>
    <p>content</p>
    <h3 id="kids">kids</h3>
    <p>content</p>
    <h3 id="teen">teen</h3>
    <p>content</p>
    <h3 id="question">question</h3>
    <p>content</p>   
</div>

.scrollspydiv {height: 500px;overflow: auto;}
.scrollspydiv h3 { text-decoration: underline; }