Bootstrap 3 smooth scrolling scrolls up then jump to the selection

Question

I've tried to put smooth scrolling into my Bootstrap 3. It smooth scrolled, but it always scrolling to top, then jump to the given hush tag section. Can someone please help me with the problem?

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;
        })

});

Hush link:

<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> 

Content:

<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>

CSS:

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

Answer 1

This problem happens due to the scroll-able item inside a div element. so there will be some kind of calculation involved, further detail will in url below.

http://kadaj.github.io/tuts/smooth-scroll/smooth-scroll.html